繪製導航箭頭形狀的CSS

Question

我想只能用css來畫一個箭頭導航，我寫了這個代碼

<span class="outer"> 
    <span class="inner"></span> 
</span> 

與風格

.outer { 
    width: 40px; 
    height: 40px; 
    border: 2px solid #000; 
    border-radius: 30px; 
    display: block; 
    position: relative; 
} 
.inner { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #000 transparent transparent; 
    position: absolute; 
    right: 35%; 
    top: 24%; 
} 

，但我想內三角是像這樣<，而不是播放按鈕。我分享了我的代碼JSFiddle

Answer 1

您可以使用僞元素來獲得這種形狀。

唯一的缺點是您需要知道top和left值;他們不是相對於.inner的大小。

.outer { 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 2px solid #000; 
 
    border-radius: 30px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.inner { 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 10px 15px 10px 0; 
 
    border-color: transparent #000 transparent transparent; 
 
    position: absolute; 
 
    right: 35%; 
 
    top: 24%; 
 
} 
 

 
.inner:after{ 
 
    content:''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 10px 15px 10px 0; 
 
    border-color: transparent #FFF transparent transparent; 
 
    position: absolute; 
 
    left: 5px; 
 
    top: -10px;  
 
}

<span class="outer"> 
 
    <span class="inner"></span> 
 
</span>

這只是放在的.inner頂部同樣大小的箭頭，但在碰一碰幾個像素。增加left樣式以使箭頭「更厚」。