如何仅使用 CSS 创建弯曲的锋利边缘（想想刀片）

Question

这是我正在尝试创建的图像：

我曾尝试使用边界半径，但结果总是太圆。我正在寻找一个 CSS 解决方案（没有 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 个大圆圈radial-gradient可以近似为：

.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>

更新半径以更接近您的形状：

.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>

并使用 CSS 变量轻松控制：

.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>