CSS学习笔记—绘图原理1
最近开始学习CSS的绘制简单图形的技巧,学习了一些大神的代码,自己也去了解了原理,然后自己做了一下归纳总结,写这篇博客,一是为了做个学习笔记,二也算是记录一下自己学习的过程和成果吧!
(个人理解,有不正确的地方,大家可以一起讨论学习)
* 注:以下图中除军校蓝色部分,其余部分都应设为透明(transparent) *
* 为了理解方便,故设有颜色(颜色描述不准确的地方不要介意哈) *
1.心形
——利用2个长方形
- 创建外部div宽度和高度(大正方形)
- 用:before,:after创建两个与div等高的长方形,变形为半圆角矩形
- 逆时针旋转45度放在左边(图中左,军校蓝色,不透明度:1)
- 把:after创建的半圆角矩形顺时针旋转45度移动位置(图中右,军校蓝色,不透明度:0.7)
要点:
圆角:border-radius: 40px 40px 0px 0px
旋转:transform: rotate(-45deg)逆时针 /(45deg)顺时针
——利用2个圆,1个正方形
- 创建div宽度和高度(正方形)(图中下,军校蓝色,不透明度:0.6)
- 先设置:before伪元素,使它和div等宽高,用border-radius:50%变成一圈,放在左边(图中左上,军校蓝色,不透明度:0.8)
- 再用:after创建第二个圈,同第一圈,把:after创建的圈移至右边(图中右上,军校蓝色,不透明度:0.8)
要点:
画圆:-webkit/-moz/-o-border-radius:50%;border-radius:50%;
旋转:transform: rotate(-45deg)逆时针 /(45deg)顺时针
2.三角形
——利用边框的颜色和粗细
- 给div一个总边框,颜色设为透明(transparent)(图中左、右,青黄色)
- 将要遮挡住的边框,颜色设为透明(transparent)(图中上,浅红色)
- 将与三角形的方向一致的边框,颜色设为想要的颜色(图中下,军校蓝色)
要点:
div不要设宽高度
边框的粗细决定三角形的形状和方向
对边的宽度要相加起来是边框宽度的两倍(类似等边)
每个边的border是三角形无缝拼接的,而不是矩形拼接的
——利用边框的颜色和粗细(无总边框)
- 将要遮挡住的边框,颜色设为透明(transparent)(图中左,青黄色)
- 将要遮挡住的边框,颜色设为透明(transparent)(图中右,浅红色)
- 将与三角形的方向一致的边框,颜色设为想要的颜色(图中上,军校蓝色)
要点:
div不要设宽高度
边框的粗细决定三角形的形状和方向
对边的宽度要相加起来等于第三边的宽度(类似等边)
每个边的border是三角形无缝拼接的,而不是矩形拼接的
3.平行四边形
——利用1个正方形
- 将div设为等宽高的正方形,设置背景色(图中军校蓝色)
- 用transform: skew(30deg,0deg)设置倾斜度
要点:
倾斜:transform:skew(30deg,0deg); //沿着X和Y轴的2D倾斜转换。
4.梯形
——利用边框的颜色和粗细
- 将div设为等宽高的正方形
- 给div一个总边框,颜色设为透明(transparent)(图中左、右,青黄色)
- 将要遮挡住的边框,颜色设为透明(transparent)(图中上,浅红色)
- 将梯形的长边对应的边框,颜色设为想要的颜色(图中下,军校蓝色)
要点:
边框的粗细决定梯形的形状和方向
box-sizing:border-box;//padding和border被包含在定义的width和height之内,width=width
每个边的border是梯形无缝拼接的,而不是矩形拼接的
对边宽度之和=div高度时,其他两边是三角形
——利用边框的颜色和粗细(无box-sizing)
- 为div设置宽度和高度,不设背景色(图中米色)
-给div四个边框,其中3个颜色设为透明(transparent)(图中左、下、右)
-将梯形的长边对应的边框,颜色设为想要的颜色(图中上,军校蓝色)
要点:
边框的粗细决定梯形的形状和方向
每个边的border是梯形无缝拼接的,而不是矩形拼接的
5.五角星
——利用3个三角形
- 创建一个三角形1(图中左,浅红色),倾斜移动至左方
- 用:before创建一个三角形2(图中正上,青黄色),倾斜移动至正上方
- 用:after创建一个三角形3(图中右,军校蓝色),倾斜移动至右方
要点:
三角形1与三角形3大小一致,关于y轴对称
6.飞机
——利用3个三角形
- 创建一个三角形1(图中左上,浅红色),倾斜移动至左上方
- 用:before创建一个三角形2(图中右下,军校蓝色),倾斜移动至右下方
- 用:after创建一个三角形3(图中左下,青黄色),倾斜移动至左下方
要点:
三角形2、3设置绝对位置,设为块类元素
7.对话框
——利用1个圆角矩形,1个三角形
- 将div设为一个圆角矩形(图中左,军校蓝色)
- 用:after创建一个三角形(图中右,浅红色),移动至右中
要点:
top: calc(50% - 15px); //向上移动div高度的一半,垂直居中
* 代码参考(主要学习) *
由于源码过多,这里就不贴出来了,有兴趣的朋友可以去看一下博主学习过的代码:
http://www.qdfuns.com/notes/34581/cc74b68009747b5ec0a135982e1697df.html