Làm thế nào là dấu mũ trên Twitter Bootstrap xây dựng?

Question

Đây là một câu hỏi tò mò hơn những gì tôi thực sự cần biết.

Trên trang này:

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Làm thế nào là caret chút/xuống mũi tên điều được xây dựng? Poking xung quanh với Firebug có vẻ như nó chỉ được thực hiện với biên giới trong suốt nhưng ... Tôi phải mất một cái gì đó.

Bootstrap rất tuyệt. Tôi chỉ có nó với Symfony.

Answer 1

Chỉ có đường viền. Khi bạn thấy các mũi tên như thế này, nhà phát triển có nhiều khả năng đã sử dụng các phần tử giả để tạo chúng. Về cơ bản những gì xảy ra là bạn tạo ra một hộp trong suốt mà không có nội dung, và vì không có gì ở đó, tất cả những gì bạn thấy là một góc của biên giới. Điều này thuận tiện trông giống như một mũi tên.

Làm thế nào để làm điều đó:

.foo:before { 
    content: ' '; 
     height: 0; 
     position: absolute; 
     width: 0; 
     border: 10px solid transparent; 
     border-left-color: #333; 
} 

http://jsfiddle.net/fGSZx/

Dưới đây là một số tài nguyên để giúp:

CSS Triangle from CSS-Tricks (điều này nên xóa tất cả mọi thứ lên)

Smashing Mag article about :before and :after

Answer 2

đây là CSS cho dấu mũ hướng lên trên, dựa trên CSS từ bootstrap:

.caret-up { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-top: none; 
    border-bottom: 4px solid #FFFFFF; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    border-top-width: 0px; 
    border-top-style: dotted; 
    content: ""; 
}