1

I have a problem with creating triangle in CSS. How make triangle with rounded corners? I have to do something lik this enter image description here

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
Tomsz Comasz
  • 123
  • 1
  • 8

2 Answers2

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