HTML与CSS之用边框画三角形和圆
2016-10-27 本文已影响159人
JustinPenChia
一.边框的形状
设置边框的四个边不同颜色,同时加粗边框
div{
width: 300px;
height: 300px;
border:50px solid red;
border-color: black blue green pink;
}```

**此时边框是梯形的!**
减小容器div的宽和高,直至为0
div{
width: 0px;
height: 0px;
border:50px solid red;
border-color: black blue green pink;
}```

此时边框成为三角形!
二.利用边框特性画三角形
只需要让其他三个角的颜色和背景色相同,留下一个三角即可
div{
width: 0px;
height: 0px;
border:50px solid red;
border-color: white white red white;
}

三.利用边框特性画圆
border-radious 给div元素添加圆角的边框
div{
width: 100px;
height: 100px;
border:1px solid red;
border-radius: 10px;
}

当border-radius的值大于等于width和heigh(width=height)值的一半时,就成为一个圆
