html - 如何制作圆 Angular 三 Angular 形？

Question

<div style="position: relative; display: inline-block;">
  <div style="width: 40px; position: absolute;">
    <div style="padding-top: 100%; /* 1:1 ratio */ overflow: hidden; background-color: #b3356d;">
    </div>
  </div>
  <div style="width: 40px; position: absolute;">
    <div class="triangle_one" style="
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 40px 0 0 30px;
                border-color: transparent transparent transparent #6980fe;">
    </div>
  </div>
  <div style="width: 40px; position: absolute;">
    <div class="triangle_two" style="
                margin-top: 10px;
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 0 30px 40px;
                border-color: transparent transparent #6980fe transparent;
                ">
    </div>
  </div>
</div>

我使用 html 和 css 制作了一些图形。

我想让它变圆。

只有这 4 条边应该像 一样倒圆 Angular

但是当我尝试使用 css 属性时 border-radius: 10%; -moz-边界半径:10%； -webkit-边框半径:10%；

或 border-bottom-left-radius: 10%; -moz-border-radius-bottomleft: 10%; -webkit-border-bottom-left-radius: 10%;

到 .triangle_one 和 .triangle_two，它使一个三 Angular 形崩溃。

如何让它变圆？

Answer 1

triangle 中的 border-radius 会给你带来问题，因为你正在使用边框制作三 Angular 形......

因此将 border-radius 值应用于主要的外部 div 以及 overflow:hidden

堆栈片段

.main {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
}

<div class="main" style="position: relative; display: inline-block;">
  <div style="width: 40px; position: absolute;">
    <div style="padding-top: 100%; /* 1:1 ratio */ overflow: hidden; background-color: #b3356d;">
    </div>
  </div>
  <div style="width: 40px; position: absolute;">
    <div class="triangle_one" style="
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 40px 0 0 30px;
                border-color: transparent transparent transparent #6980fe;">
    </div>
  </div>
  <div style="width: 40px; position: absolute;">
    <div class="triangle_two" style="
                margin-top: 10px;
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 0 30px 40px;
                border-color: transparent transparent #6980fe transparent;
                ">
    </div>
  </div>
</div>