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;
}
∞
∞
∞
∞
