纯CSS如何绘制双箭头（代码示例）

在纯CSS中，可以使用伪元素和变形（transform）来绘制双箭头。

1. 首先，需要在HTML中创建一个包含双箭头的元素，例如一个div：

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

2. 然后，在CSS中设置该元素的大小、颜色和位置。例如：

.double-arrow {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #000;
  margin: 50px;
}

这里将双箭头元素的宽高设置为100px，并设置了黑色的背景颜色和50px的外边距。

3. 接下来，需要使用伪元素:before和:after来创建两个三角形，形成双箭头的形状。例如：

.double-arrow:before,
.double-arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
}

这里使用了一个叫做CSS三角形的技巧来创建三角形。通过设置父元素的边框宽度和颜色为0，然后设置三角形的border-width和border-style属性来实现。这里设置border-width为0 10px 10px 10px即可创建一个底边长为20px的等腰三角形。

4. 现在需要将两个三角形变形成为箭头的形状。可以使用transform: rotate来实现旋转，并使用top、left等属性来调整箭头的位置。例如：

.double-arrow:before {
  transform: rotate(45deg);
  top: -10px;
  left: 0;
}
.double-arrow:after {
  transform: rotate(-45deg);
  bottom: -10px;
  left: 0;
}

这里将:before伪元素旋转45度并向上移动10px，将:after伪元素旋转-45度并向下移动10px，达到了双箭头的形状。

最终的CSS代码如下所示：

.double-arrow {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #000;
  margin: 50px;
}

.double-arrow:before,
.double-arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
}

.double-arrow:before {
  transform: rotate(45deg);
  top: -10px;
  left: 0;
}

.double-arrow:after {
  transform: rotate(-45deg);
  bottom: -10px;
  left: 0;
}

在HTML页面上使用这个双箭头元素，即可得到如下效果：