JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class='first'></div>
    <div class='second'></div>
</div>

<div class='mirror'>
    <div class='first'></div>
    <div class='second'></div>
</div>

CSS

div {
    width:200px; height:100px;
    background:none;   
    position:relative;
    margin-bottom:5px;
}

.first {
    position:absolute;
    left:0; top:0;
    width:60px; height:100px;
    background:black;
    border-radius:40px 0 0 40px;
    transform:scale(0.5, 1);
    -webkit-transform:scale(0.5, 1);
    -o-transform:scale(0.5, 1);
}
.second {
    position:absolute;
    left:57px; top:0;
    width:0; height:0;
    background:none;
    
    border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid green;
    transform:scale(1.5, 1);
    -webkit-transform:scale(1.5, 1);
    -o-transform:scale(1.5, 1);
}

.mirror { 
    transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);    
}