I have a problem with creating triangle in CSS. How make triangle with rounded corners? I have to do something lik this
Asked
Active
Viewed 722 times
1

Ori Drori
- 183,571
- 29
- 224
- 209

Tomsz Comasz
- 123
- 1
- 8
-
you should share a minimum code and look for duplicate first, this is kind of redundant question ... – G-Cyrillus May 24 '16 at 12:56
2 Answers
4
.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>

Shahil M
- 3,836
- 4
- 25
- 44
1
rotate
+ overflow
would do (with an extra element or a pseudo):
.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>

G-Cyrillus
- 101,410
- 14
- 105
- 129