CSS 圆形过渡，中间带有 V 形图案

Question

我想要一个播放按钮，就像这里找到的那​​样。然而，我希望它不是一个超出边界的播放按钮，而是一个 V 形右侧。然而，这两个用途:before我:after并不完全理解。

有人可以向我解释这些伪选择器的用途并指出我正确的方向吗？我正在尝试将该示例与此 V 形代码笔结合起来

当一切都说了又做了之后，我希望它看起来像这样。我只是认为从第一个示例中获得良好的转换真的很酷。

Answer 1

根据雪佛龙的要求，这就是我想出的。您可能需要重新调整边框粗细和位置等细节。

.chevron {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border: 0.25em solid #333;
  border-radius: 50%;
  text-align: center;
}

.chevron::after {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	/*left: 0.15em;*/
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: middle;
	width: 0.45em;
}

.chevron.right:after {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:after {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:after {
	left: 0.25em;
	transform: rotate(-135deg);
}

<p>Chevron (top) <span class="chevron top"></span>
<p>Chevron (right) <span class="chevron right"></span>
<p>Chevron (bottom) <span class="chevron bottom"></span>
<p>Chevron (left) <span class="chevron left"></span>