CSS布局：画图篇
CSS布局：画图篇
1、CSS实现一个等边三角形
主要是通过把宽高设置成0，边框宽度设置宽一些，设置其中三个边透明，只留一个边显示
等边三角形是特殊的等腰三角形，它的三条边都相等，顶角为60度。高是边长的0.866
假设我们要做边长为160px的等边三角形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 0px;
height: 0px;
margin: 100px auto;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 138.56px solid #A962CE; /*--三角形的高--*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、CSS实现扇形、圆形
圆形：
- 使用border-radius：50%弯曲元素的边框以创建圆
- 注意：宽高要相等，不然将创建椭圆
扇形：
- 左上角是圆角、其余三个角都是直角：左上角的值和宽高一样，其他三个角的值不变（等于0）
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <style type="text/css"> .sector { border-radius:80px 0 0; width: 80px; height: 80px; background: #666; } </style> </head> <body> <div class="sector"></div> </body> </html>
旋转：
- CSS中使用rotate方法来实现对元素的旋转，在参数中假如角度值，旋转方式为顺时针旋转
-
.sector { border-radius:80px 0 0; width: 80px; height: 80px; background: #666; -webkit-transform: rotate(45deg); /* for Chrome || Safari */ -moz-transform: rotate(45deg); /* for Firefox */ -ms-transform: rotate(45deg); /* for IE */ -o-transform: rotate(45deg); /* for Opera */ }
3、画0.5px的直线
3.1 使用scale缩放
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%：
}
Chrome/Safari的都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一样。
所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。
要再加上transform-origin: 50% 100%，chrome和safari才会正常
3.2 线性渐变linear-gradient
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
inear-gradient(0deg, #fff, #000)的意思是：渐变的角度从下往上，从白色#fff渐变到黑色#000，而且是线性的，在高清屏上，1px的逻辑像素代表的物理（设备）像素有2px，由于是线性渐变，所以第1个px只能是#fff，而剩下的那个像素只能是#000，这样就达到了画一半的目的。
3.3 boxshadow + viewport
.hr.boxshadow {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
其中width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。默认的缩放比例为1时，如iphone 6竖屏的宽度为750px，它的dpr=2，用2px表示1px，这样设置之后viewport的宽度就变成375px。
我们可以改成0.5，viewport的宽度就是原本的750px，所以1个px还是1px，正常画就行，但这样也意味着UI需要按2倍图的出，整体面面的单位都会放大一倍。
