css3三角形 边框 |div css 田字格

.triangle {
width: 0;
height: 0;
border-top: 50px solid #f00; // 绘制三角形
border-right: 50px solid transparent;
}

通过设置边框的宽度和颜色，可以绘制出一个边框宽度为0的三角形，但是这个三角形并不是大家想要的单独的三角形，而是绘制好的一个部分。在一个矩形元素内，大家只需要绘制上、下、左、右中的任意两条边就可以实现绘制三角形的效果。

.triangle {
width: 0;
height: 0;
border-top: 50px solid #f00;
border-left: 50px solid transparent;
}

上述代码将绘制一个向右的三角形。通过对border-top和border-left进行不同的设置，可以轻松地绘制出需要的三角形。除此之外，大家也可以结合使用不同的边框宽度来实现绘制不同大小、不同方向的三角形。

CSS3的边框功能为网页设计提供了更加灵活的设计方式，而细致的边框设计同样也是网页视觉效果的重要组成部分。学习掌握CSS3的边框技巧，可以让网页设计变得更加丰富多彩。