css - Triangle with one rounded corner

Question

I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my 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>

Answer 1

You can make a responsive triangle with one rounded corner with at least 2 approaches :

With CSS:

With one divand a pseudo element and:

• absolute positioning
• the padding technique to keep the triangle aspect ratio
• 2d transforms
• overflow:hidden;
• the transform technique to make the triangle

.arrow-left {  
  position: relative;
  width: 15%;
  padding-bottom:15%;
  border-radius: 10px;
  overflow: hidden;
  transform-origin:100% 0;
  transform: rotate(-45deg);
}
.arrow-left:after {
  content: "";
  position: absolute;
  top: 0; right:8px;
  width:100%; height:141%;
  transform-origin:inherit;
  transform: rotate(45deg);
  background:#000;
}

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