效果圖
技術要點::before 元素的開始位置,在指定的選擇器之前插入一段内容。插入的内容默認為“行内元素”,可以通過“display”強制轉換顯示類型,必須要結合content使用
::after元素的結束位置,在指定的選擇器之後插入一段内容,使用方式和“:before”一樣。插入的内容默認也是為“行内元素”,同樣可以通過“display”強制轉換顯示類型,必須要結合content使用
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>畫心形</title>
<style type="text/css">
.heart{
width: 100px;
height: 90px;
position: relative;
margin: 100px auto;
}
.heart::before{
content: '';
position: absolute;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 40px 0px 0px;
transform-origin: 0 100%;
transform: rotate(-45deg);
left: 50px;
}
.heart::after{
content: '';
position: absolute;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 40px 0px 0px;
transform-origin: 100% 100%;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!