我试图只使用CSS重现这个https://gyazo.com/848fa4e24ecb33f220a465cdcf571698。
我得到了带有边框属性的“箭头”,然后使用这些css规则和html旋转到我想要的一面:
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 5px;
transform: rotate(-45deg);
<a href="#" class="right-arrow"></a>
但是我无法找到一种方法来获得具有背景的元素,如链接上的图像:/任何提示?提前致谢。
使用border-radius:50%
作为圆,角度使用伪类::before
或::after
将其显示为content
。
.right-arrow {
display: block;
text-decoration: none;
background: #8AD82F;
border-radius: 50%;
width: 45px;
height: 45px;
}
.right-arrow::after {
content: '\a0\a0\276f';
font-size: 32px;
font-weight: 900;
color: #fff;
}
<a href="#" class="right-arrow"></a>