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

别等时光非礼了梦想. 提交于 2019-11-26 18:19:54

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!