CSS

通过使用伪元素,您可以创建形状的两侧,从而获得所需的输出.

所有浏览器都支持此解决方案.

(资料图片)

div {

position: relative;

width: 178px;

height: 100px;

}

div:before,

div:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 10px solid black;

border-radius: 50px 50px 0 50px;

transform: rotate(-45deg);

}

div:after {

left: auto;

right: 0;

border-radius: 50px 50px 50px 0;

transform: rotate(45deg);

}

如果你想要它更加匀称,对边界半径规则的一些修改确实有助于给它更多的形状.

div {

position: relative;

width: 178px;

height: 100px;

}

div:before,

div:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 10px solid black;

border-radius: 80% 0 55% 50% / 55% 0 80% 50%;

transform: rotate(45deg);

}

div:after {

left: auto;

right: 0;

transform: rotate(-135deg);

}

SVG

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

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

帆布

Canvas类似于SVG,但使用栅格(基于像素)而不是矢量来创建形状.

Canvas的浏览器支持是quite good.

var shape = document.getElementById("infinity").getContext("2d");

shape.lineWidth = 6;

shape.strokeStyle = "#333";

shape.beginPath();

shape.moveTo(100, 100);

shape.bezierCurveTo(200, 0, 200, 200, 100, 100);

shape.bezierCurveTo(0, 0, 0, 200, 100, 100);

shape.closePath();

shape.stroke();

HTML

从近似重复的答案中可以看出,这是所有HTML替代品的积累.

我只为规范添加了这个,并向用户显示HTML实体可以实现形状.

p {

font-size: 2em;