如何用CSS在方块间实现彩色左右箭头？

要在你的方块之间添加彩色左右箭头，我们可以利用CSS伪元素（::before/::after）结合Flex布局来实现，完全不需要额外的HTML元素。以下是具体的实现步骤和代码：

1. 调整容器布局 #

首先确保你的方块容器是Flex布局，这样方块和箭头能横向排列并垂直对齐：

.squares {
  display: flex;
  align-items: center; /* 让箭头和方块垂直居中 */
  gap: 40px; /* 给方块之间留出箭头的空间 */
  padding: 20px; /* 可选，给容器加内边距让布局更美观 */
  background-color: #f5f5f5; /* 可选，方便查看效果 */
}

2. 添加彩色箭头 #

我们可以用相邻兄弟选择器（+）给每个非第一个方块的前后添加箭头，通过伪元素绘制不同颜色的左右箭头：

/* 向右的彩色箭头（绿色） */
.squares .square + .square::before {
  content: "";
  /* 用border绘制箭头形状 */
  border: solid #25d366;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 10px; /* 控制箭头大小 */
  transform: rotate(-45deg); /* 旋转成向右箭头 */
  margin-right: -18px; /* 调整位置让箭头贴近方块 */
}

/* 向左的彩色箭头（蓝色） */
.squares .square + .square::after {
  content: "";
  border: solid #0084ff;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 10px;
  transform: rotate(135deg); /* 旋转成向左箭头 */
  margin-left: -18px;
}

自定义调整说明 #

• 箭头颜色：修改border的颜色值即可换成你需要的彩色（比如#ff2d55红色、#ffcc00黄色等）。
• 箭头大小：调整padding的值（越大箭头越大）和border-width的值（越大箭头线条越粗）。
• 箭头位置：修改margin-right/margin-left的值，让箭头刚好卡在两个方块之间。

把以上代码添加到你的现有CSS中，就能看到方块之间的彩色左右箭头了。

内容的提问来源于stack exchange，提问作者flash