CSS border生成三角形及多边形原理及border-style各个值的效果

效果

生成的效果图

原理

- 如上图，border是由四个三角形组成的，当我们设置内容的宽高为0，border为一个合适的数值，并设定border四个方向不同的样式就可以得到一个类似的效果图

- 当给内容一个高度时得出如上的结果

- 还可以加border-radius 来改变样式，如上图，自己可以试试其他属性渐变之类的

border-style属性

• none 无任何样式边框
• hidden 对于表时用于解决边框冲突
• dotted 点边框
• dashed 虚线边框
• solid 实线边框
• double 双线边框
• groove 3D凹槽边框
• ridge 3D垄状边框
• inset 3D inset边框
• outset 3Doutset边框
• inherit 继承父元素边框样式

根据border-width的不同值可以有不同的效果


border-width: 52px 124px 0 0;
border-style: solid;
border-color: red transparent transparent transparent;

从上面的例子就可以发现，只要设定了border-width 的各个边给出的三角形就是类似第一个图中的某一个三角形；当设定border-width 的某边的宽度为0时可以参考下图(上下左右的宽度依次为0)