How to do make rounded triangle?

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>

I made some figure using html and css.

And I want to make it rounded.

Just these 4 edges should be rounded like,

But when I try to use css properties border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%;

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

to .triangle_one and .triangle_two, It crashes an triangle.

How to make it rounded?

Answer 1

The border-radius in triangle will give you the problem because you are making triangle using borders...

So apply border-radius value to the main outer div and also 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>