html - 是否可以仅使用 CSS 制作圆 Angular 三 Angular 形？

Question

我正在尝试仅使用 CSS 制作以下形状:

这是我目前拥有的:

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #ff4369 transparent transparent transparent;
}

<div class="triangle">
</div>

我无法使用 border radius 来使左上角变圆...是否有其他方法可以做到这一点，或者我是否需要使用 SVG？

Answer 1

是的，可以使用 border-radius:

.triangle {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-top: solid 30px rgb(200,30,50);
  border-left: solid 30px rgb(200,30,50);
  border-top-left-radius: 12px;
  border-right: solid 30px transparent;
  border-bottom: solid 30px transparent;
}

<div class="triangle triangle-0"></div>