如何在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>