HTML tinh khiết/CSS để tạo ra con trỏ tam giác dưới nút

Question

Hiện nay tôi có một div trông như thế này:

tôi cần phải chỉnh sửa HTML/CSS để nó hiển thị như thế này với một hình tam giác nhỏ bên dưới. Lý tưởng nhất, tôi muốn làm điều này bằng cách sử dụng hoàn toàn HTML và CSS, không có tệp hình ảnh. Theo CSS-Tricks nó có thể được thực hiện.

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

Nếu bất cứ ai có thể giúp tôi làm được điều này tôi thực sự muốn đánh giá cao nó!

Answer 1

Tạo div của riêng bạn với một mũi tên ở http://cssarrowplease.com/

Bạn có thể định cấu hình nó như bạn muốn và trở thành một CSS rõ ràng

---

Cách hoạt động:
Cho phép tạo ra một tam giác rất đơn giản với kỹ thuật này:

Điều quan trọng là height: 0; & width: 0 của phần tử giả mà chúng tôi áp dụng biên giới . Vì vậy, bạn có thể tưởng tượng một yếu tố không có kích thước. Và đây là nguồn gốc của biên giới. Vì vậy, mỗi bên của đường viền là một hình tam giác (thử tô màu mỗi bên theo một màu khác để hiểu nó).
Vì vậy, để tạo hiệu ứng "tam giác đơn", chỉ cần áp dụng màu trong suốt cho đường viền và tô màu hình tam giác bạn muốn hiển thị.

---

Alternative: CSS Clip-Path

Bạn có thể tạo một hình chữ nhật bây giờ rất dễ dàng với các mới clip-path với CSS. Chỉ cần theo dõi hỗ trợ trình duyệt.Như thường lệ, IE & buồn bã sửa Edge cả hai sẽ không hỗ trợ nó cũng như Opera Mini: Can I Use

nhanh Ví dụ:

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

Vì vậy, bây giờ bạn chỉ cần 1 dòng. Nice, phải không?

Answer 2

Đây được gọi là "chú thích".

Dưới đây là một số ví dụ:

http://cssdeck.com/labs/bv45bh6p (một số ví dụ)

http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ (với lời giải thích về cách hoạt động)