Create a rounded arrow
CSS
This requires just a bit of fancy border-radius styling to achieve the shape you want.
.container {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.arrow {
width: 50px;
height: 30px;
position: absolute;
top: 32px;
left: 25%;
border-radius: 0px 100% 100% 0px / 0 50% 50% 0;
background: white;
}<div class="container">
<div class="arrow"></div>
</div>If you want it in a single element, you can just use a psuedo element like so.
.arrow {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.arrow:before {
content: '';
width: 50px;
height: 30px;
position: absolute;
top: 32px;
left: 25%;
border-radius: 0px 100% 100% 0px / 0 50% 50% 0;
background: white;
}<div class="arrow"></div>SVG
A good alternative would also be SVG to create this shape which also makes it fully responsive.
<svg width="100px" height="100px" viewbox="0 0 20 20" style="background: red;">
<path d="M5,7
Q15,7 15,10
Q15,13 5,13z" fill="white"></path>
</svg>SVG
CSS border radius won't let you get the exact output you are looking for easily. I would suggest an inline SVG with the path element with one quadratic bezier command :
svg{width:100px;}<svg viewbox="0 0 20 8">
<path d="M0 0 Q 30 4 0 8" />
</svg>Then you can color the arrow with the CSS fill property, see this fiddle (credits to @Nick R for the example posted in the comments)
CSS
You can also use the 2 values for the border-radius property (see MDN for an explanation of how it works) it is simple but it won't let you make the arrow 'point' as sharp as it is in your image :
.curved-arrow {
width:40px; height:25px;
background:#000;
border-top-right-radius:100% 50%;
border-bottom-right-radius:100% 50%;
}<div class="curved-arrow"></div>