czysty HTML/CSS, aby utworzyć wskaźnik trójkąt pod klawiszem

Question

Obecnie mam div, który wygląda tak:

muszę edytować HTML/CSS, tak aby wyświetlał tak małym trójkątem pod spodem. Idealnie, chciałbym to zrobić za pomocą czysto HTML i CSS, bez plików graficznych. Zgodnie z CSS-Tricks można to zrobić.

HTML:

<ul id="nav"> 
    <li class="active"><a href="#"><div class="triangle"></div>Dashboard</a></li> 
    <li><a href="users/index.html"><div class="triangle"></div>Manage Users</a></li> 
    <li><a href="tickets/index.html"><div class="triangle"></div>Manage Tickets</a></li> 
    <li><a href="reports/index.html"><div class="triangle"></div>Reports</a></li> 
</ul> 

CSS:

#nav { 
    float: right; 
    margin: 0; 
    padding: 8px 0 0 0; 
    list-style: none; 
    display: inline-block; 
} 

#nav li { 
    float: left; 
    padding: 7px 5px; 
    margin: 0 5px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    border-radius: 7px; 
} 

#nav li a { 
    color: #0b70cc; 
    text-decoration: none; 
    padding: 7px 5px; 
} 

#nav li.active a { 
    color: #ffffff; 
} 

#nav li.active { 
    background-color: #0b70cc; 
    color: white; 
} 

JSFiddle

Jeśli ktoś może mi pomóc to bym naprawdę wdzięczny zrobić!

Answer 1

wygenerować własny div ze strzałką w http://cssarrowplease.com/

Można skonfigurować go tak, jak chcesz i stać się czystym CSS

---

Jak to działa:
Lets' stworzyć bardzo prosty trójkąt z tej techniki:

Ważną rzeczą jest height: 0; & width: 0 z pseudo-elementu, gdzie stosuje się granicę . Możesz sobie wyobrazić element bez rozmiaru. I to jest początek granicy. Więc każda strona granicy jest trójkątem (spróbuj pokolorować każdą stronę w innym kolorze, aby ją zrozumieć).
Aby utworzyć efekt "pojedynczego trójkąta", po prostu zastosuj przezroczysty kolor do granicy i pokoloruj trójkąt, który chcesz wyświetlić.

---

Alternatywa: CSS Clip-Path

Można utworzyć prostokąt teraz bardzo łatwe z nowym clip-path z CSS. Po prostu uważaj na obsługę przeglądarki.Jak zwykle, IE & niestety Krawędź zarówno nie będzie wspierać go jak Opera Mini: Can I Use

krótki przykład:

.new_way { 
 
    position: relative; 
 
    margin: 100px auto; 
 
    background: #88b7d5; 
 
    width: 100px; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.new_way::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: calc(50% - 10px); 
 
    background: #88b7d5; 
 
    width: 20px; 
 
    height: 20px; 
 
    
 
    /* The points are: left top, right top, center bottom */ 
 
    clip-path: polygon(0 0, 100% 0, 50% 100%); 
 
}

<div class="new_way"> 
 
    Clip Path 
 
</div>

Więc teraz trzeba tylko 1 linię. Fajnie, prawda?

Answer 2

Nazywa się to "objaśnieniem".

Oto kilka przykładów:

http://cssdeck.com/labs/bv45bh6p (niektóre przykłady)

http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ (z wyjaśnieniem, jak to działa)