JSFiddle - React, Tailwind, and code Playground
HTML
<div class="DC">
<div class="C"></div>
<div class="S">
<span></span><b></b>
</div>
</div>
CSS
.DC {
position: absolute;
width: 354px;
height: 296px;
top: 72px;
left: 71px;
opacity: 1;
}
.S {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 100px;
right: 20px;
display: block;
content: '';
-webkit-transform: rotate(0deg);
}
.S:before {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 10px;
right: -26px;
display: block;
content: '';
-webkit-transform: rotate(50deg);
}
.S:after {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 10px;
right: 5px;
display: block;
content: '';
-webkit-transform: rotate(-50deg);
}
.S span {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 39px;
right: -19px;
display: block;
content: '';
-webkit-transform: rotate(151deg);
}
.S span:before {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 8px;
right: -26px;
display: block;
content: '';
-webkit-transform: rotate(55deg);
}
.S span:after {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 5px;
right: 6px;
display: block;
content: '';
-webkit-transform: rotate(-50deg);
}
.S b {
border-bottom: 45px solid red;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 28px;
right: 9px;
...