当前位置：首页 > CSS

css制作透明箭头

2026-03-12 14:57:33CSS

使用CSS边框制作透明箭头

通过CSS的边框属性可以创建透明箭头。利用不同方向的边框组合，形成三角形效果。

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

调整边框方向可以改变箭头指向：

上箭头：border-bottom
下箭头：border-top
左箭头：border-right
右箭头：border-left

使用伪元素创建箭头

结合伪元素和定位可以创建更灵活的箭头效果。

css制作透明箭头

.element::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #000;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}

使用CSS clip-path制作箭头

clip-path属性提供更精确的形状控制。

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

调整多边形顶点可以创建不同方向的箭头。

css制作透明箭头

SVG箭头方案

使用内联SVG创建可缩放的高质量箭头。

<div class="arrow">
  <svg viewBox="0 0 10 10">
    <path d="M0,0 L10,5 L0,10 Z" fill="#000"/>
  </svg>
</div>

CSS中设置SVG样式：

.arrow svg {
  width: 20px;
  height: 20px;
}

渐变背景箭头

通过线性渐变创建箭头效果。

.arrow {
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right, transparent 50%, #000 50%) no-repeat,
              linear-gradient(to bottom left, transparent 50%, #000 50%) no-repeat;
  background-size: 50% 100%;
  background-position: left, right;
}