border用处多

1. 使用border属性实现梯形

   给定一个div，通过设定div四个边框不同的颜色且设置比较粗的边框线条，可以看到div除了中间的content部分，四个边框均成梯形状，既然已经有了梯形的雏形，我们可以隐藏一部分内容，只显示我们需要的部分，例如如果我们想显示bottom边框呈现的梯形，则需要把别的边框颜色设置为透明即可得到bottom边框呈现的梯形。

 

2.使用border属性实现三角形

  给定一个div，通过设定div四个边框不同的颜色且设置比较粗的边框线条，可以看到div除了中间的content部分，四个边框均成梯形状，如果content部分为0，那么四个边框将呈现三角形形状，则只要把width，height都设置为0px，就可以得到一个三角形。根据需要设置边框颜色设置透明得到想显示的三角形部分。

3.使用border属性实现直角三角形

  法1：可以通过2中的左边三角形和上边三角形合并得到直角三角形（ps：颜色一致），即将右边边框和下边边框颜色设置为透明，只显示左边和上边边框。

  法2：去掉左边框影响上边框三角形构成的左边界，即不设置左边框。

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/5390210.html