如何不使用content属性修复SCSS代码实现圆角箭头效果

安全阿岳

2026-8-28

圆角箭头实现方案（无需content属性）

靠0宽高+边框拼接生成的三角形，本质是边框斜接形成的视觉形状，直接加border-radius只能作用在边框外拐角，没法实现箭头尖、箭尾均匀的圆角效果，这是原有代码不生效的核心原因。
不需要使用content属性，也不需要新增DOM节点，直接修改原有span的样式就能实现目标效果，完全复用现有HTML结构。

实现代码

HTML结构（无需改动，和原有代码完全一致）

<div class="container">
  <span class="calendar-arrow calendar-arrow-left"></span>
  <span class="calendar-arrow calendar-arrow-right"></span>
</div>

修改后的SCSS代码

@mixin arrow($direction) {
  width: 8px;
  height: 12px;
  background: #8f9cbc;
  border-radius: 2px;
  @if $direction == left {
    transform: rotate(-45deg) skew(15deg, 15deg);
  }
  @if $direction == right {
    transform: rotate(45deg) skew(-15deg, -15deg);
  }
}

.container {
  display: flex;
  width: 400px;
  height: 200px;
  background: yellow;
  position: relative;
  .calendar-arrow-left {
    @include arrow(left);
    position: absolute;
    top: 28px;
    left: 20px;
  }
  .calendar-arrow-right { 
    @include arrow(right);
    position: absolute;
    top: 28px;
    left: 40px;
  }
}