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

1,214 阅读3分钟

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

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

关于鸡蛋的实现

主要利用的核心属性border

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

image.png

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

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

image.png

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

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

思路:改变圆的width或height;

image.png

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

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

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

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

image.png

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

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

image.png

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

关于心形的实现

方法一

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

首页,先从画一个容器:

image.png

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

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

image.png

#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;

image.png

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

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

image.png

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

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

最后把颜色都改为红色,心形就画好啦!

image.png

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

方法二

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

先画一个正方形

image.png

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

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

image.png

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

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

image.png

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

image.png

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

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