width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
结果
transparent 透明的
将宽度和高度设置为0
上下左边框都设置为transparent
只单单为一个方向的边框设置颜色
缺点是:虽然展示为一个三角形,但是占位为一个正方形,可以使用绝对定位来设置位置。
width: 0;
height: 0;
border-top: none;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
结果:
左右两边三角形会被隐藏,顶部区域的三角形会消失
这样的好处是,三角形的占位区域只有原来正方形的一半