如何仅使用 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>