css实现对角线 |纯css可以实现的特效代码

.diagonal {
width: 0;
height: 0;
border-top: 50px solid transparent;  /* 上边的三角形 */
border-right: 100px solid #f00;      /* 右边的三角形 */
border-bottom: 50px solid transparent;  /* 下边的三角形 */
}

代码中，大家使用了border属性来设置三角形的大小和颜色。其中，border-top和border-bottom的宽度都是50px，而border-right的宽度是100px，这样就可以形成一个直角三角形。如果想要形成其他角度的三角形，可以根据需求调整边框的大小和颜色。

另外，还可以使用transform属性来实现对角线，具体代码如下：

.skew {
width: 100px;
height: 50px;
background-color: #f00;
transform: skewX(-45deg);
}

代码中，大家使用了transform属性的skewX函数来将元素按照X轴倾斜了-45度，形成了对角线的效果。需要注意的是，在使用skewX函数时，需要指定角度的符号，正数表示向右倾斜，负数表示向左倾斜。

通过以上两种方式，就可以实现CSS对角线效果了。选择哪种方式，取决于具体的需求和实现效果。希望这篇文章能够对您有所帮助。