一、css3的三角形画法
(一)、原理
通过对于边框的设置,来画出三角形。
width: 50px;
height: 50px;
border-bottom: 50px red solid;
border-top: 50px green solid;
border-left: 50px yellow solid;
border-right: 50px blue solid;
当设置盒子的宽高为0时,就是由四个三角形维成的一个正方形。
(2)三角形的组成
当三个方向的颜色为透明,就能形成一个执行某个方向的三角形
width: 0px;
height: 0px;
border-bottom: 50px transparent solid;
border-top: 50px green solid;
border-left: 50px transparent solid;
border-right: 50px transparent solid;
只有边框的顶端会显现,就会出现一个向下的三角形,其余类似。
(3)不规则三角形的思路(边框的宽度是指的是:从边框到中心的距离。)
1.底或者顶为最长边框
width: 0px;
height: 0px;
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-left: 100px transparent solid;
border-right: 50px transparent solid;
bottom:50px代表:从底向上的高度为50px
left:100px代表:左边向右边边框的距离为100px
right:50px表示:右边向左边边框的距离为50px
2.底和定不是最长边框:通过css3的旋转来调整
width: 0px;
height: 0px;
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-left: 100px transparent solid;
border-right: 50px transparent solid;
transform: rotate(135deg);
二、css3圆角属性border-radius
(一)、原理
将一个盒子分为4分,控制每一份的弧形。
border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角):
(二)、百分比含义
百分比是对于盒子的总体宽高百分比的设置。
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
设置盒子宽高100px,百分之50,就代表4块区域中的每一块弧度的长宽都是50px。
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50%;
当长宽不一样时,百分比算出来的值也会不同,导致每一块区域的长宽不一样,就会产生椭圆。
每一块宽为100px,长为50px
(三、固定值的含义)
在长宽一致时,固定在和百分比的作用基本一致(我觉得是完全一样的。)
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50px;
在长宽不一样时候:
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50px;
每块区域的长宽都只变动50px,(类似下图)
(4)小知识点
1.因为是每个区域的长宽,所以实际上每个区域能传入两个值,第一个值:长,第二个值:宽。
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50%/40%;
2.百分比和固定值会产生的误差。
因为边框的产生,导致数值产生误差,需要设置为ie盒模型,在设置宽度时将边框数值包括进去,才不会导致误差
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
border: 5px red solid;
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
box-sizing: border-box;
border: 5px red solid;