设置border属性变化不同形状：三角形、圆形、弧形 2017-03-20
一、通过设置边框----正方形、三角形
<style>
.c{
height: 0px;
width: 0px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
.c1{
height: 0px;
width: 0px;
border-top: 100px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
注：c1：div没有高度，上：100px;下左右：50px （上边错了）
.c2{
height: 0px;
width: 0px;
border-top: 0px solid red;
border-right: 0px solid yellow;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
.e{
height: 50px;
width: 50px;
border-top: 40px solid red;
border-right: 40px solid yellow;
border-bottom: 40px solid green;
border-left: 40px solid blue;
}
.a{
height: 0px;
width: 0px;
border-top: 40px solid transparent;
border-right: 40px solid yellow;
border-bottom: 40px solid green;
border-left: 40px solid blue;
}
注：c2：上右：0px;下左右：50px （下边错了）
.b{
height: 0px;
width: 0px;
border-top: 40px solid transparent;
border-right: 40px solid yellow;
border-bottom: 40px solid transparent;
border-left: 40px solid blue;
}
.d{
height: 0px;
width: 0px;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid blue;
}
.f{
height: 0px;
width: 0px;
border-top: 40px solid red;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
}
注：
如果要使其变成钝角，就把底边的宽度变小，如果是锐角，就增加宽度。如果是直角，就把左或右border的宽度设成0px
二、圆形类
（1）圆形（宽高等）
width: 150px;
height: 150px;
border-radius: 50%;
（2）椭圆（宽高不等）
width: 150px;
height: 100px;
background-color: greenyellow;
border-radius: 50%;
（3）圆形矩形 （比例缩小）（若为圆形正方形则只需将宽高设置为相等）
width: 150px;
height: 100px;
border-radius: 10%;
（4）弧形
第一步：
width: 50px;
height: 50px;
background-color: greenyellow;
border-radius: 80%;
border-top: 20px solid red;
border-right: 20px solid yellow;
border-bottom: 20px solid blueviolet;
border-left: 20px solid blue;
第二步：
width: 50px;
height: 50px;
background-color: white;
border-radius: 80%;
border-top: 20px solid transparent;
border-right: 20px solid yellow;
border-bottom: 20px solid blueviolet;
border-left: 20px solid transparent;
三、其他
width: 150px;
height: 150px;
background-color: white;
border-radius: 80%;
border-top: 1px solid red;
border-right: 20px solid yellow;
border-bottom: 20px solid blueviolet;
border-left: 20px solid blue;
此外：div可通过设置边框做直线
