这是我参与更文挑战的第4天,活动详情查看 更文挑战
在之前的文章【CSS | 4句CSS送你一个小月牙】中,汇总了很多经常用到的css形状,本篇文章主要是分析一下四边形系列的实现思路。
梯形的实现
梯形的实现其实和我们之前说过的三角形的实现很像;
主要利用的核心属性border
第一步
首先:画一个加边框的普通正方形,是这样的:
<div class="div"></div>
.div {
width: 100px;
height: 100px;
border: 1px solid #66CCFF;
}
第二步
如果把border的数值调大
.div {
width: 100px;
height: 100px;
border: 50px solid #66CCFF;
}
第三步
如果只把高度设为0,会发现好像变成了一个长方形;
.div {
width: 100px;
height: 0;
border: 50px solid #66CCFF;
}
第四步
但是如果给border设置不同的颜色,
会发现这个长方形其实是由两个梯形和两个三角形组合而成的,
以为得到绿色的正梯形为例,我们现在只需要把多余的图形去掉即可。
.div {
width: 100px;
height: 0;
border: 50px solid #66CCFF;
border-color: #66CCFF #FF9966 #66FFCC #66FFFF;
}
第五步
如果我们把除绿色外的其他形状颜色利用transparent
设为透明,
可以发现我们好像得到了我们想要的梯形
.div {
width: 100px;
height: 0;
border: 50px solid #66CCFF;
border-color: transparent transparent #66FFCC transparent;
}
但是如果给这个梯形加上背景色,
可以看到去掉的形状其实还在占位。
.div {
width: 100px;
height: 0;
border: 50px solid #66CCFF;
border-color: transparent transparent #66FFCC transparent;
background: #000000
}
第六步
所以我们需要处理一下占位的问题;
思路:我们都知道border可以分别为top,bottom,left,right
四个方向设值,如果想要去掉多余的占位,我们只需要分开给需要的方向设值,就可以得到我们想要的完美梯形啦;
.div {
height: 0;
width: 100px;
border-bottom: 50px solid #66FFCC;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
平行四边形的实现
原理
原理:利用transform属性拉伸矩形。
平行四边形有好多种实现方法,这里只介绍最简单的这种
从下图可以看到,我们实现平行四边形的关键就是这一句 transform: skew(20deg);
skew属性
介绍:skew是transform的倾斜属性;
用法: transform: skew(20deg)
或 transform: skew(20deg,20deg)
;
参数:
- 一个参数时:表示水平方向的倾斜角度;
- 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。
图解:[图片来源于网络]
skewX(30deg) 等价于transform:skew(30deg, 0)如下图:
skewY(10deg) 等价于transform:skew(0, 30deg)如下图:
skew(30deg,10deg)等价于transform:skewX(30deg); transform:skewY(10deg); 如下图:
其他
使用这种方法有一个问题就是,如果平行四边形里面有内容,也会使里面的内容发生倾斜变形。
解决办法:可以对内容再使用一次反向的 skew() 变形,来抵消容器对内容产生的变形效果。
transform: skew(-20deg);
菱形的实现
菱形的实现也有很多种
方案一
最简单的就是,利用transform
的旋转属性,对正方形旋转45度即可。
#diamond{
width: 100px;
height: 100px;
background: #99CCFF;
transform: rotate(45deg);
}
方案二
之前我们已经介绍过三角形是怎么实现的,其实菱形我们还可以把它看成是两个三角形的组合。
我们只需要把两个三角形拼在一起,就变成一个菱形啦。
#diamond {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FF9966;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #99CCFF;
}
小可爱看完就点个赞再走吧!🤞🤞🤞