How to create a curved, sharp edge (think blade) using only CSS

Question

Here is an image of what I am trying to create:

I have tried using border radius but the result is always too round. I am looking for a CSS solution (no SVG).

.blade {
  height: 300px;
  width: 150px;
  border-radius: 0 0 50% 50%;
  border-left:20px solid #c0bfde;
  border-right:20px solid #7b7ba0;
  background:#e3e1f6
}

<div class="blade"></div>

Answer 1

2 big circles created using radial-gradient can approximate this:

.blade {
  width: 150px;
  height: 330px;
  background: 
    radial-gradient(circle 600px at  600px 0, #e3e1f6 calc(100% - 51px), #c0bfde calc(100% - 50px) 99.8%, transparent) left, 
    radial-gradient(circle 600px at -526px 0, #e3e1f6 calc(100% - 51px), #7b7ba0 calc(100% - 50px) 99.8%, transparent) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
}

<div class="blade"></div>

Update the radius to get closer to your shape:

.blade {
  width: 150px;
  height: 425px;
  background: 
    radial-gradient(circle 1200px at  1200px 0, #e3e1f6 calc(100% - 51px), #c0bfde calc(100% - 50px) 99.8%, transparent) left, 
    radial-gradient(circle 1200px at -1123px 0, #e3e1f6 calc(100% - 51px), #7b7ba0 calc(100% - 50px) 99.8%, transparent) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

<div class="blade"></div>

And with CSS variables to easily control:

.blade {
  --b:50px;   /* borders */
  --r:1200px; /* radius*/
  --w:150px;  /* width */

  display:inline-block;
  vertical-align:top;
  width: var(--w);
  /* the real formula cannot be expressed with calc() so we use a big value
    real formula: height = sqrt(var(--r)² - (r - var(--w)/2)²) */
  height: calc(var(--r)/2); 
  background: 
    radial-gradient(circle var(--r) at  var(--r)                   0, #e3e1f6 calc(100% - var(--b) - 1px), #c0bfde calc(100% - var(--b)) 99.8%, transparent) left, 
    radial-gradient(circle var(--r) at calc(var(--w)/2 - var(--r)) 0, #e3e1f6 calc(100% - var(--b) - 1px), #7b7ba0 calc(100% - var(--b)) 99.8%, transparent) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

<div class="blade"></div>
<div class="blade" style="--b:20px;--r:800px"></div>
<div class="blade" style="--b:30px;--r:2000px"></div>

<div class="blade" style="--b:30px;--r:2000px;--w:100px"></div>