css arrow，caret，＆gt;与背景

Question

我正在尝试重现这个https://gyazo.com/848fa4e24ecb33f220a465cdcf571698 只使用css。

我得到了带有边框属性的“箭头”，然后使用这些css规则和html旋转到我想要的一面：

border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 5px;
transform: rotate(-45deg);

<a href="#" class="right-arrow"></a>

但是我无法找到一种方法来获得具有背景的元素，如链接上的图像：/ 任何提示？提前谢谢。

Answer 1

对圆圈使用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>