html的css曲线实现,html – 使用css创建s形曲线

SVG

正如哈利在评论中所建议的那样,SVG将是你最好的选择,因为如果不使用多个元素,伪元素或使用可能不支持的CSS3属性,CSS中的双曲线是不可行的.

SVG代表可伸缩矢量图形. Web浏览器将其视为图像,但您可以在SVG中添加文本和普通HTML元素.

所有浏览器都支持它,如下所示：CanIUse

CSS

当然,这仍然可以用CSS,但确实需要使用伪元素：before和：after.它对于曲线也不是最好的,因为它会在没有抗锯齿的情况下渲染它们

div {

background: blue;

width: 50px;

height: 75px;

position: relative;

}

div:before {

content: '';

background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);

position: absolute;

top: 0;

left: 100%;

width: 100px;

height: 75px;

}

div:after {

content: '';

position: absolute;

width: 50px;

height: 75px;

background: blue;

border-radius: 0 0 100% 0 / 0 0 100% 0;

top: 100%;

left: 0;

}