使用 CSS 的倒圆角

Question

我有 CSS 代码

 #box { width: 200px; height: 50px; background-color: blue; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; position: relative; margin: 30px; text-align: center; color: white; padding-top: 10px; } #box::before, #box::after { content: ""; width: 0; height: 0; right: 0; position: absolute; } #box::before { border-right: 10px solid blue; border-top: 10px solid blue; border-left: 10px solid transparent; border-bottom: 10px solid transparent; bottom: -20px; } #box::after { border-right: 10px solid blue; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid blue; position: absolute; top: -20px; }

 <div id="box">#box</div>

这给出了一些形状

我需要的形状是

我需要曲线而不是像图像中那样在右上角（ #box::before ）和右下角（ #box::after ）的三角形中使用斜边。

有没有办法使用纯 CSS 来实现？

代码沙盒演示

谢谢

Answer 1

您可以使用 box-shadow 属性创建凹入半径。

1. 这种技术创建了一个隐藏溢出的透明正方形。

   

2. 然后它创建一个带有框阴影的透明圆圈。

   

3. 然后我们调整圆圈的位置以只查看它的四分之一。

   

---

片段

 #box { position: relative; width: 200px; height: 50px; background-color: blue; border-radius: 9999px 0 0 9999px; margin: 30px; text-align: center; color: #fff; padding-top: 10px; } #top, #bottom { position: absolute; height: 30px; width: 30px; right: 0; overflow: hidden; } #top { top: -30px; } #bottom { bottom: -30px; } #top::before, #bottom::before { content: ''; position: absolute; right: 0; height: 200%; width: 200%; border-radius: 100%; box-shadow: 10px 10px 5px 100px blue; z-index: -1; } #top::before { top: -100%; }

 <div id="box"> <div id="top"></div> #box <div id="bottom"></div> </div>

Answer 2

您可以使用像此代码段中的 svg 背景图像轻松实现此目的。 这里的曲线可能不是您想要的方式，但您肯定可以根据需要更改 svg 中的路径。

 #box { width: 200px; height: 50px; background-color: blue; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; position: relative; margin: 30px; } #box::before, #box::after { content: ""; width: 20px; height: 20px; right: 0; position: absolute; } #box::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>'); bottom: -20px; } #box::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>'); top: -20px; }

 <div id="box"></div>

Answer 3

你可以使用负空间吗？ 您可以拥有一个与您的形状具有相同背景颜色的容器，然后将元素周围的角变圆以创建错觉。

 .container { background-color: blue; width: 100%; } .negat { background-color: white; height: 100px; } .posit-bg { background-color: white; } .posit { background-color: blue; height: 100px; border-radius: 50px 0px 0px 50px; } .top { border-radius: 0px 0px 50px 0px; } .bot { border-radius: 0px 50px 0px 0px; }

 <div class="container"> <div class="negat top"></div> <div class="posit-bg"> <div class="posit"></div> </div> <div class="negat bot"></div> </div>

Answer 4

 #box{ width:200px; height:50px; background-color:blue; color:#ffffff; text-align:center; padding-top:30px; border-radius:9999px 0 0 9999px; } .sq{ width:25px; height:25px; background-color:blue; } #sq1,#sq2,#sq11,#sq22{ border-radius:-999px; margin-left:175px; } .sq1{ background-color:#ffffff; height:25px; width:25px; } #sq11{ border-bottom-right-radius:9999px; margin-bottom:-25px; position: relative; z-index:1; } #sq22{ border-top-right-radius:9999px; margin-top:-25px; position: relative; z-index:1; }

 <div class="sq1" id="sq11"></div> <div class="sq" id="sq1"></div> <div id="box">#box</div> <div class="sq" id="sq2"></div> <div class="sq1" id="sq22"></div>