SCSS箭头带有圆角

Question

我正在尝试从这些箭头，圆形的角箭头中脱颖而出。

这是示例代码：

<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: 0;
  height: 0;
  border-style: solid !important;
  border-style: inset;
  -webkit-transform: rotate(360deg);
  border-radius: 3px; /* this does not work well */
  @if $direction == left {
    border-width: 6px 8px 6px 0;
    border-color: transparent #8f9cbc transparent transparent;
  }
  @if $direction == right {
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #8f9cbc;
  }
}


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

}

我已经搜索了其他解决方案，但是它们似乎具有内容：''属性。 我想知道是否可以修复上述代码，而无需使用content。

感谢您的帮助。

这是 codepen 。

编辑：这些是我需要创建的箭头的尺寸：

Answer 1

这种创建箭头的方式不会让您使用/查看border-radius ie圆角，因为您正在使用透明的边框。您也许可以用border-radius将其他两个角落四舍五入，除了尖头（＆lt;＆gt;），因为这甚至不是“真实”指向您看到的，因此它们出现在结果透明度和实际（边界）角是隐藏的。

要解决此问题，您需要使用transform和： 之前： pseudo元素以创建箭头。

jsfiddle