Create a rounded arrow

Question

I am trying to make an arrow that looks like this:

However, this is the closest I can get to it:

.button {
  margin: 4em 0;
  padding: 2em;
  width: 15%;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  webkit-justify-content: center;
  justify-content: center;
}
.curved-arrow {
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 30px solid #fff;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

<div class="button">
  <div class="curved-arrow"></div>
</div>

Is this even possible? I know I can use images, but my designer made several of these in multiple colors to use throughout the site that I'd rather just use CSS for the shape.

If it's hard to see it's a flat straight line from top to bottom on the left, and curves in to the middle on the right.

Answer 1

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>