CSS: размещение стрелки / треугольника с границей в верхней части моего выпадающего меню

Question

CSS: размещение стрелки / треугольника с границей в верхней части моего выпадающего меню

Только что запустил этот сайт (http://dovidoved.org / ) и клиент хочет один из этих треугольников / стрелок в верхней части каждого выпадающего меню. Проблема в том, что меню имеет границу вокруг него, и стрелка должна зацепиться как с фоном, так и с границей. Не знаю, как это сделать. Есть предложения? Должен ли я использовать изображение? Вот мой CSS:

 /* creates triangle */

 .main-navigation ul ul:before {

     border-bottom: 10px solid #fae0bb;

     border-left: 10px solid transparent;

     border-right: 10px solid transparent;

     content: "";

     height: 0;

     position: absolute;

     right: 0;

     top: -10px;

     width: 0;

 }



 .main-navigation ul ul {

     background: #fae0bb;

     border: 8px solid #fffefe;

     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

     float: left;

     position: absolute;

     margin: 0;

     top: 2.8em;

     left: -999em;

     width: 200px;

     z-index: 99999;

}

538 2

css css3 css-shapes

2 ответов:

Comments

Ничего не найдено.

EdenSource · Accepted Answer · 2015-04-22 11:36:35

Вы можете сделать это с помощью :beforeи :afterпсевдо-элементов, чтобы создать два треугольника:
.main-navigation ul ul:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.main-navigation ul ul:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}
Вам просто нужно установить правильное значение right для обоих, чтобы они соответствовали тому, что вам нужно.

Live exemple

Mihey Egoroff · Accepted Answer · 2015-04-22 10:54:33

.main-navigation a:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f00;
    position: absolute;
    top: -2px;
    right: -20px;
}
Отрегулируйте заполнение li, чтобы треугольники поместились.