绘制导航箭头形状的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样式以使箭头“更厚”。