欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

用css制作心形

謝彥文2年前7瀏覽0評論

在CSS中,制作心形可以運用到偽元素以及transform屬性。

.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: red;
border-radius: 25px 25px 0 0;
}
.heart:before {
transform: rotate(-45deg);
top: -50px;
left: 0;
}
.heart:after {
transform: rotate(45deg);
top: -50px;
right: 0;
}

上述代碼中,首先定義了一個class名為heart的元素,并設(shè)置其寬高以及旋轉(zhuǎn)45度的transform屬性。然后通過before和after偽元素來分別實現(xiàn)左右兩側(cè)的半個心形,給定其width、height、背景色以及border-radius屬性。再根據(jù)具體的旋轉(zhuǎn)角度和top、left、right屬性來定位。通過這樣的方式,便可制作出一個簡單的心形。