设置border属性变化不同形状：三角形、圆形、弧形 2017-03-20

一、通过设置边框----正方形、三角形

<style>

.c{

height: 0px;

0px;

border-top: 50px solid red;

border-right: 50px solid yellow;

border-bottom: 50px solid green;

border-left: 50px solid blue;

}

.c1{

height: 0px;

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;

0px;

border-top: 0px solid red;

border-right: 0px solid yellow;

border-bottom: 50px solid green;

border-left: 50px solid blue;

}

.e{

height: 50px;

50px;

border-top: 40px solid red;

border-right: 40px solid yellow;

border-bottom: 40px solid green;

border-left: 40px solid blue;

}

.a{

height: 0px;

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;

0px;

border-top: 40px solid transparent;

border-right: 40px solid yellow;

border-bottom: 40px solid transparent;

border-left: 40px solid blue;

}

.d{

height: 0px;

0px;

border-top: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 40px solid blue;

}

.f{

height: 0px;

0px;

border-top: 40px solid red;

border-right: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 40px solid transparent;

}

注：

如果要使其变成钝角，就把底边的宽度变小，如果是锐角，就增加宽度。如果是直角，就把左或右border的宽度设成0px

二、圆形类

（1）圆形（宽高等）

150px;

 height: 150px;

 border-radius: 50%;

 

（2）椭圆（宽高不等）

150px;

height: 100px;

 background-color: greenyellow;

 border-radius: 50%;

 

（3）圆形矩形  （比例缩小）（若为圆形正方形则只需将宽高设置为相等）

  150px;

 height: 100px;

 border-radius: 10%;

 

（4）弧形

第一步：

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;

 

第二步：

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;

       

三、其他

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