CSS: Açılır menünün üst kısmına kenarlıklı bir ok/üçgen yerleştirme

Bu web sitesini (http://dovidoved.org/) yeni başlattı ve istemci, her bir açılır menünün üstündeki bu üçgenlerden/oklardan birini istiyor. Sorun, menünün etrafında bir sınır var ve ok, hem arka plan hem de kenarlıkla birlikte göz atmalıdır. Bunu nasıl yapacağından emin değilim. Baska öneri? Görüntü kullanmalı mıyım?CSS: Açılır menünün üst kısmına kenarlıklı bir ok/üçgen yerleştirme

/* 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; 
}

kaynak

2015-04-22 Adam Bell

Ne bir sorun menü .nav bir css üçgen ekleyeceksiniz: sonra? –

Her iki resmi de, her bir bağlantının arka planı olarak, sağ tarafa yerleştirilmiş olarak veya belki de bir simge fontu (çok yönlü ve esnek, boyutu ve rengi değiştirmeden değiştirmenize olanak tanıyan) olarak kullanabilirsiniz. Bu ikinci durumda, size [Icomoon] (https://icomoon.io/) –

'nu kullanabileceğinizi umuyoruz: http://jsfiddle.net/ond3g1jp/ –

bunu yapabilirsiniz iki üçgen oluşturmak için, :before ve :after sözde öğeleri kullanarak:

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

Sadece onlara neye ihtiyacınız için uygun hale getirmek için her ikisi için de doğru right değerini belirlemek zorunda.

Live exemple

kaynak

2015-04-22 08:36:35 EdenSource

Harika! Örnek için teşekkürler. Gerçekten harika çalıştı. –

Yardım ettiğine sevindim :) – EdenSource

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

enter image description here

üçgenler uygun hale getirmek için li dolgusu ayarlayın: İşte benim CSS bu.

kaynak

2015-04-22 07:52:37

CSS: Açılır menünün üst kısmına kenarlıklı bir ok/üçgen yerleştirme

cevap

İlgili konular