设置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;

}

.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: px;

width: px;

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;

}

.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可通过设置边框做直线