怎么做圆角三角形？

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制作了一些数字。

我想把它弄清楚。

这四条边应该是圆形的，

但是当我尝试使用css属性border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%;

时

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

到.triangle_one和.triangle_two，它会崩溃一个三角形。

如何使其四舍五入？

Answer 1

三角形中的border-radius会给您带来问题，因为您使用边框创建三角形...

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

Stack Snippet

.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>