使用 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 样式，使箭头“更粗”。