css制作右箭头

使用边框实现右箭头

通过设置元素的边框属性，利用透明边框和实色边框的组合可以创建右箭头效果。定义一个零宽高的元素，设置左右边框为透明，上下边框为实色。

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000;
}

使用伪元素和旋转

通过伪元素生成一个矩形，使用CSS的transform属性旋转45度形成箭头。这种方法允许更灵活地控制箭头的大小和颜色。

.arrow-right {
  position: relative;
  width: 100px;
  height: 20px;
  background: #000;
}

.arrow-right::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #000;
  transform: rotate(45deg);
}

使用SVG内联

直接在CSS中使用SVG的path定义箭头形状。这种方法支持复杂的路径和颜色填充，适合需要高精度控制的场景。

.arrow-right {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23000'/%3E%3C/svg%3E");
}

使用Unicode字符

某些Unicode字符（如→）可以直接作为箭头使用。通过调整字体大小和颜色实现简单效果。

.arrow-right {
  font-size: 24px;
  color: #000;
  line-height: 1;
}

使用CSS clip-path

通过clip-path属性裁剪元素形状为箭头。这种方法支持自定义路径，适合现代浏览器。

.arrow-right {
  width: 20px;
  height: 20px;
  background: #000;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}