Html 使用CSS的倒铲转角

我有CSS代码

#框{
宽度：200px；
高度：50px；
背景颜色：蓝色；
边框左上半径：9999px；
边框左下半径：9999px；
位置：相对位置；
利润率：30像素；
文本对齐：居中；
颜色：白色；
填充顶部：10px；
}
#盒子：之前，
#盒子：：之后{
内容：“；
宽度：0；
身高：0；
右：0；
位置：绝对位置；
}
#方框：：之前{
右边框：10px纯蓝色；
边框顶部：10px纯蓝色；
左边框：10px实心透明；
边框底部：10px实心透明；
底部：-20px；
}
#盒子：：之后{
右边框：10px纯蓝色；
边框顶部：10px实心透明；
左边框：10px实心透明；
边框底部：10px纯蓝色；
位置：绝对位置；
顶部：-20px；
}

---

#box

可以使用box shadow属性创建凹面半径

此技术创建一个隐藏溢出的透明正方形

然后创建一个带有长方体阴影的透明圆

然后我们调整圆的位置，使其仅能看到四分之一的圆 它

---

片段

#框{
位置：相对位置；
宽度：200px；
高度：50px；
背景颜色：蓝色；
边界半径：9999px 0 9999px；
利润率：30像素；
文本对齐：居中；
颜色：#fff；
填充顶部：10px；
}
#顶部，
#底部{
位置：绝对位置；
高度：30px；
宽度：30px；
右：0；
溢出：隐藏；
}
#顶{
顶部：-30px；
}
#底部{
底部：-30px；
}
#top：：之前，
#底部：：之前{
内容：''；
位置：绝对位置；
右：0；
身高：200%；
宽度：200%；
边界半径：100%；
盒影：10px 10px 5px 100px蓝色；
z指数：-1；
}
#前{
前-100%；
}

#盒子

您可以通过使用svg背景图像（如本文所示）轻松实现这一点。这里的曲线可能不是您想要的方式，但是您可以根据需要更改svg中的路径

#框{
宽度：200px；
高度：50px；
背景颜色：蓝色；
边框左上半径：9999px；
边框左下半径：9999px；
位置：相对位置；
利润率：30像素；
}
#盒子：之前，
#盒子：：之后{
内容：“；
宽度：20px；
高度：20px；
右：0；
位置：绝对位置；
}
#方框：：之前{
背景图像：url（'data:image/svg+xml；utf8'）；
底部：-20px；
}
#盒子：：之后{
背景图像：url（'data:image/svg+xml；utf8'）；
顶部：-20px；
}

---

你能用负数吗？你可以有一个与你的形状背景颜色相同的容器，然后围绕着元素的各个角落创建一个幻觉

.container{
背景颜色：蓝色；
宽度：100%；
}
.否定{
背景色：白色；
高度：100px；
}
.posit背景{
背景色：白色；
}
.假定{
背景颜色：蓝色；
高度：100px；
边界半径：50px 0px 0px 50px；
}
.顶{
边界半径：0px 0px 50px 0px；
}
.机器人{
边界半径：0px 50px 0px 0px；
}

#框{
宽度：200px；
高度：50px；
背景颜色：蓝色；
颜色：#ffffff；
文本对齐：居中；
填充顶部：30px；
边界半径：9999px 0 9999px；
}
.sq{
宽度：25px；
高度：25px；
背景颜色：蓝色；
}
#sq1、sq2、sq11、sq22{
边界半径：-999px；
左边距：175px；
}
.sq1{
背景色：#ffffff；
高度：25px；
宽度：25px；
}
#sq11{
边框右下半径：9999px；
边缘底部：-25px；
位置：相对位置；
z指数：1；
}
#sq22{
边框右上角半径：9999px；
利润上限：-25px；
位置：相对位置；
z指数：1；
}

#盒子

Hei，看看这是不是你想要的，#box:：before{……border右下角半径：75%；}#box:：before{……border右下角半径：75%；}before{…边框右上角半径：75%；@theVoogie不！它给出了一些奇怪的形状。你可以添加你想要的形状的图像。这是一个白色背景，而不是透明的。如果蓝色标签放在另一层的顶部，它会遮住下面的一层。所以它不会适合所有情况。嗨，谢谢你的回答。是吗不需要额外的元素也可以吗？只需使用

：：after

和

：：before

就可以了。不幸的是，这项技术需要两个元素。第一个用于创建溢出边界，第二个用于创建半径。