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:去掉左边框影响上边框三角形构成的左边界,即不设置左边框。