角が丸い三角形

Question

CSSで三角形を作成する際に問題があります。どのように丸みを帯びたコーナーで三角形を作るのですか？私はこの

Answer 1

rotate + overflowリク何かをしなければならない（余分な要素または擬似で）行うだろう：

.tr { 
 
    height:40px; 
 
    width:40px; 
 
    overflow:hidden; 
 
    transform:scale(1,1.2);/* increase visual height */ 
 
    } 
 
.tr div {/* could be a pseudo */ 
 
    width:70%; 
 
    height:70%; 
 
    float:right; 
 
    background:#C20009; 
 
    transform:rotate(-45deg); 
 
    box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3); 
 
    transform-origin: top right; 
 
    border-radius : 8px 0 0 0 /* and the rounded corner to finish */ 
 
    }

<div class="tr"> 
 
    <div></div> 
 
</div>

Answer 2

.arrow-right { 
 
    width: 5px; 
 
    height: 5px; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid green; 
 
    border-radius:5px; 
 
}

<div class="arrow-right"></div>