这是我参与更文挑战的第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);
}
小可爱看完就点个赞再走吧!🤞🤞🤞