有没有帮人做机械设计的网站/2023网站seo

效果

生成的效果图

原理

• 如上图，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; 
```![效果图](https://img-blog.csdn.net/20180627093309862?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyNzAzNDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
**从上面的例子就可以发现，只要设定了`border-width` 的各个边给出的三角形就是类似第一个图中的某一个三角形；当设定`border-width` 的某边的宽度为0时可以参考下图(上下左右的宽度依次为0)**
![这里写图片描述](https://img-blog.csdn.net/20180627095607825?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyNzAzNDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)