CSS: Umieszczenie strzałki/trójkąta z ramką u góry mojego menu rozwijanego

Question

Właśnie uruchomiliśmy tę stronę internetową (http://dovidoved.org/), a klient chce jednego z tych trójkątów/strzałek u góry każdego rozwijanego menu. Problem polega na tym, że menu ma wokół siebie obramowanie, a strzałka powinna zazębiać się zarówno z tłem, jak i ramką. Nie wiem, jak to zrobić. Jakieś sugestie? Czy muszę użyć obrazu? Oto mój 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; 
} 

Answer 1

Można to zrobić za pomocą :before i :after pseudo elementy, aby utworzyć dwa trójkąty:

.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; 
} 

Po prostu trzeba ustawić poprawną wartość right zarówno aby je dopasować do tego, co trzeba.

Live exemple

Answer 2

.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; 
} 

Regulacja dopełnienie li aby trójkąty dopasowanie.