CSS学习笔记---绘图原理1

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

---