HTML与CSS之用边框画三角形和圆

一.边框的形状

设置边框的四个边不同颜色，同时加粗边框

div{
    width: 300px;
    height: 300px;
    border:50px solid red;
    border-color: black blue green pink;
}```
![梯形边框](http://upload-images.jianshu.io/upload_images/1722340-9653003a924a7ef4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**此时边框是梯形的！**
减小容器div的宽和高，直至为0

div{
width: 0px;
height: 0px;
border:50px solid red;
border-color: black blue green pink;
}```

边框2.png

此时边框成为三角形！

二.利用边框特性画三角形

只需要让其他三个角的颜色和背景色相同，留下一个三角即可

div{    width: 0px;    height: 0px;    border:50px solid red;    border-color: white white red white;
}

边框3.png

三.利用边框特性画圆

border-radious 给div元素添加圆角的边框

div{    width: 100px;    height: 100px;    border:1px solid red;    border-radius: 10px;
}

边框4.png

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

边框5.png

作者：JustinPenChia
链接：https://www.jianshu.com/p/dfe9a5b7f4da