CSS | css画鸡蛋和心形的思路解析

这是我参与更文挑战的第5天，活动详情查看 更文挑战

在之前的文章【CSS | 4句CSS送你一个小月牙】中，汇总了很多经常用到的css形状，本篇文章主要是分析一下圆形系列和其他系列的实现思路。

关于鸡蛋的实现

主要利用的核心属性border

首先：我们先来画一个普通的正方形

.div {
    width: 100px;
    height: 100px;
    background-color: #FFCC99;
}

利用border-radius: 50%，我们可以得到一个圆形

.div {
    width: 100px;
    height: 100px;
    background-color: #FFCC99;
    border-radius: 50%;
}

我们先来把这个圆形变成椭圆；

思路：改变圆的width或height;

.div {
    width: 65px;/*改变宽 左图*/
    height: 100px;
    background-color: #FFCC99;
    border-radius: 50%;
}
.div {
    width: 100px;
    height: 65px;/*改变高 右图*/
    background-color: #FFCC99;
    border-radius: 50%;
}

现在我们已经实现椭圆效果了，看上去是不是已经有点像是鸡蛋了呢，但是如果认真观察过鸡蛋会发现，其实鸡蛋的两端大小是不同的。

现在我们要怎么实现大头和小头的效果呢？

思路：我们可以利用border-radius属性来实现。

我们可以使用border-radius的百分比的值进行分离，然后控制百分比不一致。

关键代码:border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

#egg {
      display: block;
      width: 126px;
      height: 180px;
      background-color: #FFCC99;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

关于心形的实现

方法一

现在想要用一个div画出一颗心，核心方法就是使用伪元素。

首页，先从画一个容器：

#heart {/*实际使用只需要保留position属性*/
    position: relative;
    width: 100px;
    height: 90px;
    background: #FF9966
}

然后利用伪元素:before和:after画两个长方形

#heart:before {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #66CCFF;
    }
#heart:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 50px;
    height: 80px;
    background: #66FFFF;
    }

给长方形的上半部分加border-radius: 50px 50px 0 0;

#heart:before {
   （...同上省略）
    border-radius: 50px 50px 0 0;
    }
  #heart:after {
    （...同上省略）
    border-radius: 50px 50px 0 0;
    }

利用transform属性，对两个长方形做一个正负45度的旋转

#heart:before {
    （...同上省略）
    transform: rotate(-45deg);
    }
 #heart:after {
    （...同上省略）
    transform: rotate(45deg);
 }

最后利用transform-origin属性，调整一下旋转元素的基点位置；

最后把颜色都改为红色，心形就画好啦！

#heart:before {
    （...同上省略）
    transform-origin: 0 100%;
    }
 #heart:after {
    （...同上省略）
    transform-origin :100% 100%;
 }

方法二

还有一种更好理解的方法，同样利用伪元素来实现；

先画一个正方形

#heart {
    position: relative;
    width: 100px;
    height:100px;
    background: red;
}

然后利用两个伪元素:before和:after，画两个圆,圆心分别定为在正方形的上面和右边；

#heart:before {
    position: absolute;
    content: "";
    top: -50px;
    right:0;
    width: 100px;
    height: 100px;
    background: #66CCFF;
    border-radius: 50%
 
}
#heart:after {
    position: absolute;
    content: "";
    right: -50px;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: #66FFFF;
    border-radius: 50%
}

把两个圆的颜色变成和正方形的一样，可以看到倒下的心形已经出来了

现在我们只需要把整个div旋转45度，心形就画好了！

#heart {
    position: relative;
    width: 100px;
    height:100px;
    background: #FF9966;
   transform: rotate(-45deg);
}

---

小可爱看完就点个赞再走吧！🤞🤞🤞