Html 如何使用css创建波形
我试图将li元素显示为波浪。 我不想使用任何背景图像，但边界半径不支持负值。我希望你能帮助我Html 如何使用css创建波形,html,css,css-shapes,Html,Css,Css Shapes,我试图将li元素显示为波浪。 我不想使用任何背景图像，但边界半径不支持负值。我希望你能帮助我 我能得到的最接近的结果是仅使用css .one{ 位置：绝对位置； 顶部：22px； 左：19px； 宽度：230px； 高度：180像素； 背景：#0F1E3C； 边界半径：100%； 剪辑：rect（70像素，自动，自动，45像素）； 变换：旋转（90度）； } 第一：以前{ 内容：''； 位置：绝对位置； 顶部：-15px； 左：-62px； 宽度：200px； 高度：200px； 背景：白色；
我能得到的最接近的结果是仅使用css
.one{
位置：绝对位置；
顶部：22px；
左：19px；
宽度：230px；
高度：180像素；
背景：#0F1E3C；
边界半径：100%；
剪辑：rect（70像素，自动，自动，45像素）；
变换：旋转（90度）；
}
第一：以前{
内容：''；
位置：绝对位置；
顶部：-15px；
左：-62px；
宽度：200px；
高度：200px；
背景：白色；
边界半径：100%；
}
.二{
位置：绝对位置；
顶部：156px；
左：59px；
宽度：230px；
高度：180像素；
背景：#0F1E3C；
边界半径：100%；
剪辑：rect（70像素，自动，自动，45像素）；
变换：旋转（-90度）；
}
.2:以前{
内容：''；
位置：绝对位置；
顶部：-15px；
左：-62px；
宽度：200px；
高度：200px；
背景：白色；
边界半径：100%；
}虽然SVG在这里是一个更好的选择，但您可以使用类似边框的hack来创建此形状的基础 这是这种形状的一个基本示例，尽管我要说还有很多改进的空间：
div{
位置：相对位置；
高度：100px；
宽度：100px；
背景：浅灰色；
溢出：隐藏；
}
部门：以前{
内容：“；
位置：绝对位置；
顶部：钙（-100%-25px）；
左：00%；
身高：200%；
宽度：200%；
边界半径：50%；
背景：矢车菊蓝；
边框底部：50px纯蓝色；
}
分区：第n个孩子（2）{
变换：旋转（180度）；
左边距：40px；
利润上限：-25px；
}