心形和蛋形
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
图形拆解：
截屏2020-01-31下午10.31.52.png
需要画出半圆形和长方形的组合。
然后再旋转。
会用到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;
/*定义旋转原点*/
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;
/*定义旋转原点*/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%;设置旋转的中心。
这也需要注意加前缀，例子中没加。
显示效果
截屏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.
