How does CSS draw a heart shape?
May 29, 2021 Article blog
In previous articles, the W3Cschool section covered CSS painting of several basic graphics and how CSS draws semicircles. So today we're going to learn how CSS draws the heart.
The end result:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS绘制心形 - 编程狮(w3cschool.cn)</title>
</head>
<style>
#heart {
position: relative;
width: 100px;
height: 200px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 100px;
top: 0;
width: 100px;
height: 160px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-50deg);/*transform:rotate围绕某一轴以给定的度数进行旋转*/
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-transform-origin: 0 100%;/*允许改变被转换元素的位置*/
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<body>
<div id="heart"></div>
</body>
</html>These are the full contents of how CSS draws the heart shape, and ask the students to practice consolidation on their own.