心形和蛋形

作者: 钢笔先生 | 来源:发表于2020-01-31 23:07 被阅读0次

心形和蛋形
脸型和命运（其四）
CSS图形每日一练（下）
CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形
社团课
鸡蛋形男人
画画的心和形
心形
心形
材料力学第三章（下）

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%;
}