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%;
}

但我希望内部三角形像这样＆lt;，而不是播放按钮。我在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样式以使箭头“更粗”。

使用CSS绘制导航箭头形状

1 个答案: