Triangle with one rounded corner

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>

Note that you need to add the vendor prefixes to the transform and transform-origin properties (more info on canIuse)

With inline SVG:

This example uses one path element for the triangle with a bezier curve command for the rounded corner (Q0 5 0.8 4.2 in the d attribute):

svg{
  display:block;
  width:10%;
}

<svg viewbox="0 0 5 10">
  <path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}

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