css布局三角巧妙运用-三角强化

css布局三角巧妙运用-三角强化

原理：做出一个矩形盒子（如下：红色）和一个直角三角盒子（如下：蓝色），将直角三角定位到矩形右侧。

直角三角代码如下：

*注意：直角三角是由一个width和height均为0的正方形盒子变化而来，通过设置盒子的边框宽度来实现大小，案例中不是等腰三角形，需要通过增加上边框的高度来实现。

案例完整代码如下：

*注意：我们通常用 i 标签来制作此三角样式， i 标签为行内标签，通常行内标签没有宽度和高度，但是 i 标签的默认 display：block。