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>