Time: 20200131
圖形拆解：
截屏2020-01-31下午10.31.52.png
需要畫出半圓形和長方形的組合。
然后再旋轉(zhuǎn)。
會用到border-radius.
心形
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>心形和蛋形</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="heart"></div>
<div id="egg"></div>
</body>
</html>
CSS
#heart {
width: 200px;
height: 160px;
position: relative;
margin: 100px auto;
/* background-color: pink; */
}
#heart::before {
content: '';
width: 60px;
height: 100px;
background-color: red;
position: absolute;
border-radius: 50px 40px 0px 0px;
-webkit-border-radius: 50px 40px 0px 0px;
-moz-border-radius: 50px 40px 0px 0px;
-ms-border-radius: 50px 40px 0px 0px;
-o-border-radius: 50px 40px 0px 0px;
/*定義旋轉(zhuǎn)原點*/
transform-origin: 0 100%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
left: 50px;
top: 10px;
}
#heart::after {
content: '';
width: 60px;
height: 100px;
background-color: red;
position: absolute;
border-radius: 50px 40px 0px 0px;
-webkit-border-radius: 50px 40px 0px 0px;
-moz-border-radius: 50px 40px 0px 0px;
-ms-border-radius: 50px 40px 0px 0px;
-o-border-radius: 50px 40px 0px 0px;
/*定義旋轉(zhuǎn)原點*/transform-origin: 100% 100%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: -10px;
top: 10px;
}
這里需要注意的是transform-origin: 0 100%;設(shè)置旋轉(zhuǎn)的中心。
這也需要注意加前綴，例子中沒加。
顯示效果
截屏2020-01-31下午11.05.42.png
蛋形
蛋形的畫法也很簡單：
/* 蛋形 */
#egg {
width: 126px;
height: 180px;
background-color: #FA3;
margin: 100px auto;
/* '/'前面是四個x值，后面是4個y值 */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-ms-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-o-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
顯示效果
截屏2020-01-31下午11.04.00.png
END.
