css - Triangle with one rounded corner -
i want make one rounded corner triangle i'm unable make it.
here code:
.arrow-left { width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-right: 80px solid blue; } <div class="arrow-left"></div> i need corner pointing left rounded shown in image :

i know little hacky, don't think there easy way single class.
all i've done rotated box 45 degrees border-radius:10px , contained in div width set desired width of arrow , overflow:hidden spills on invisible.
.arrow-left { position:absolute; width:100px; height:100px; left:50px; background:black; -webkit-transform:rotate(45deg); transform:rotate(45deg); border-radius:10px; } .cover { position:absolute; height:100px; width:40px; overflow:hidden; }
Comments
Post a Comment