stilearn css kullanarak seçilen bir menü öğesini işaretleme

Question

Stilearn css kullanan bir projeyi miras aldım.
Menüler için stil sağlar ve özelliklerden biri, ekran görüntüsünün ekinde gösterildiği gibi, küçük beyaz bir üçgenin bulunduğu seçili bir menü düğmesini işaretler. Uygulamasına ait

Örnek buradadır: http://wrapbootstrap.com/preview/WB0TFD2S0

Temelde bu nasıl yapılır? Ben kullanıyorum Dom kaşif ve anlayamıyorum. (Başka bir css kullanılarak yapılmaya başlayabilir - bunun bir kısmı vardır). "Etkin" css stilinin <li> maddesine uygulandığını görebiliyorum.

Answer 1

<ul class="sidebar"> elemanı aktif olarak tanımlanabilir <li> listesi elemanları vardır. Bir liste öğesi <li class="active"> aktif olduğunda, o beyaz üçgen alır.

Kandırmanın kendisi :before ve :after sözde öğelerinde kenarlıklar kullanılarak yapılır. Burada bu konuda daha fazla görüntüle: Bu CSS deneyin İşte https://css-tricks.com/snippets/css/css-triangle/

Answer 2

.sidebar>li.active:before { 
    border-color: rgba(204,204,204,0); 
    border-right-color: #E0E4E8; 
    border-width: 11px; 
    top: 50%; 
    margin-top: -11px; 
} 

.sidebar>li.active:after, .sidebar>li.active:before { 
    right: -1px; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
}