css - 带一个圆 Angular 的三 Angular 形

Question

我只想一个三 Angular 形的圆 Angular ，但我做不到。
这是我的 code :

.arrow-left {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 80px solid blue;
}

<div class="arrow-left"></div>

我需要指向左边的 Angular 是圆的，如图所示:

Answer 1

我知道这有点 hacky，但我不认为有一种简单的方法可以用一个类来做到这一点。

我所做的就是使用 border-radius:10px 将一个框旋转 45 度，然后将其包含在另一个 div 中，并将宽度设置为所需的箭头宽度和 溢出:隐藏以便溢出的所有内容都是不可见的。

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}

<div class="cover">
  <div class="arrow-left"></div>
</div>