用css画一个箭头向着左侧的三角形

可以使用 CSS 的伪元素 `::before` 和 `::after` 来实现一个向左的箭头和三角形。

HTML 代码：

<div class="arrow"></div>

CSS 代码：

.arrow {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #000;
  position: relative;
}

.arrow::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #000;
}

.arrow::after {
  content: "";
  position: absolute;
  left: -14px;
  top: -15px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid white;
}

解释：

- 首先，`.arrow` 元素的宽度和高度都为 0，以便我们使用边框来绘制三角形和箭头。
- 我们设置了三角形的边框，使其向右延伸，同时设置了一个黑色的边框颜色。
- 接下来，我们使用 `::before` 伪元素来绘制箭头。它的位置是相对于 `.arrow` 元素的，所以我们将其定位到 `.arrow` 元素的左侧，并使用白色的边框颜色。
- 最后，我们使用 `::after` 伪元素来绘制三角形的左侧部分，以便隐藏箭头的一部分。我们将其定位到 `.arrow` 元素的左上角，并使用白色的边框颜色来匹配背景颜色。