【偽元素】CSS帆布Canvas的創建方案

來源：CSDN 時間：2023-01-12 10:21:06

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;

}

∞

責任編輯：

標簽：

上一篇：今日報丨新一代數據中心：虛擬化與管理的有機結合
下一篇：最后一頁

一区二区三区电影_国产伦精品一区二区三区视频免费_亚洲欧美国产精品va在线观看_国产精品一二三四

【偽元素】CSS帆布Canvas的創建方案