css 样式添加小三角

CSS 中可以使用伪元素 `::before` 和 `::after` 来创建小三角形，通常用于实现箭头、图标等效果。例如，如果你想在某个元素两侧添加向右的小三角，你可以这样做：

.element {
  position: relative;
  display: inline-block; /* 或者 flex, grid 等其他定位方式 */
}

.element::before,
.element::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

/* 向右三角示例 */
.element::before {
  top: 50%;
  margin-top: -4px; /* 高度的一半 */
  border-width: 0 4px 4px 0;
  border-color: transparent transparent #000 transparent;
}

/* 可以为后边三角设置不同的颜色或其他样式 */
.element::after {
  right: 0;
  top: 50%;
  margin-top: -4px;
  border-width: 0 4px 4px 0;
  border-color: transparent transparent transparent #000;
}