CSS：在中間傾角的三角形

我想在中間傾角this triangle，我不想要任何額外的HTML。CSS：在中間傾角的三角形

<span class="dropdown">dropdown</span> 

.dropdown:after 
{ 
    display: inline-block; 

    margin-left: 4px; 

    content: ''; 

    border-top: 5px solid rgba(0,0,0,.2); 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
}

期望的結果

我怎麼可以這樣做呢？

來源

2015-05-09 ditto

試試這個：

.dropdown:after { 
    display: inline-block; 
    position: relative; 
    content: ""; 
    top: -2px; 
    right: 0; 
    margin-left: 4px; 
    width: 6px; 
    height: 6px; 
    transform: rotate(45deg); 
    border-right: 2px solid rgba(0,0,0,.2); 
    border-bottom: 2px solid rgba(0,0,0,.2); 
}

Fiddle here

注意，還有其他的選擇也即圖標字體，背景圖片等

來源

2015-05-09 01:15:12 Neps

只使用CSS我不知道如何創建箭頭上的圓角端。但要創造一個線箭頭，也可以重疊顯示:before和:after元素在彼此的頂部，像這樣：

.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown:after { 
 
    position: absolute; 
 
    right: -12px; 
 
    top: 7px; 
 
    content: ''; 
 
    border-top: 3px solid rgb(255, 255, 255); 
 
    border-right: 3px solid transparent; 
 
    border-left: 3px solid transparent; 
 
    z-index: 1001; 
 
} 
 
.dropdown:before { 
 
    position: absolute; 
 
    right: -14px; 
 
    top: 7px; 
 
    content: ''; 
 
    border-top: 5px solid rgb(0, 0, 0); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    z-index: 1000; 
 
}

<span class="dropdown">dropdown</span>

來源

2015-05-09 01:16:30 Hynes

CSS：在中間傾角的三角形

回答

相關問題