如何在CSS中制作边框半径？

Question

如何使边界半径朝内？

.circle {
   width:100px;
   height:100px;
   background-color:solid red;
   border-radius:-50px 50px -50px [enter image description here][1]50px;
 }

我知道-50px是不可接受的，但我只是给出一个理论示例。
请参见下图作为参考。

Answer 1

SVG

您不应该使用CSS创建复杂的形状。
请改用SVG。

使用SVG路径创建的形状
除了路径中的3条曲线

高亮显示每条曲线，以便您了解如何创建最终形状。

 <svg viewBox="0 0 100 100" width="200"> <path d="M50 10 C 100 10, 100 90, 50 90" stroke="green" fill="transparent"/><!--Large curve--> <path d="M50 90 C 50 65, 35 50, 10 50" stroke="red" fill="transparent"/><!--Smaller down curve--> <path d="M10 50 C 35 50, 50 35, 50 10" stroke="blue" fill="transparent"/><!--Smaller up curve--> </svg> <svg viewBox="0 0 100 100" width="200"> <path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" stroke="gray" fill="red"/> </svg> 

Answer 2

也许有些径向渐变：

 body { background:linear-gradient(pink,yellow); height:100vh; margin:0; } .box { width:150px; height:150px; margin:10px; border-radius:50%; overflow:hidden; position:relative; } .box:before { content:""; position:absolute; top:0; bottom:50%; left:0; right:0; background:radial-gradient(circle at top left,transparent 44%, red 44.5%); } .box:after { content:""; position:absolute; bottom:0; top:50%; left:0; right:0; background:radial-gradient(circle at bottom left,transparent 44%, red 44.5%); } 

 <div class="box"> </div>