css正三角形 |css 界面全屏显示图片

/* 方法一 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /*改变值可以改变三角形的尺寸*/
border-right: 50px solid transparent;
border-bottom: 100px solid #f00; /*改变值可以改变三角形的颜色*/
}

这种方法使用了CSS的边框属性，将上边框和左右边框设为透明，下边框设为需要的颜色。

/* 方法二 */
.triangle {
width: 100px;
height: 100px;
transform: rotate(45deg); /*旋转45度*/
background-color: #0f0;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

这种方法使用了CSS3的裁剪路径属性，将四个点设为正方形的中心和四个角，形成一个正三角形。

/* 方法三 */
.triangle {
width: 0;
height: 0;
border-top: 100px solid #00f; /*改变值可以改变三角形的颜色和尺寸*/
border-left: 50px solid transparent;
border-right: 50px solid transparent;
transform: rotate(45deg); /*旋转45度*/
}

这种方法与第一种类似，不同之处在于使用了上边框而不是下边框，通过旋转将它变成了一个正三角形。

以上三种方法都可以绘制正三角形，选择其中一种就可以根据需要进行修改，实现自己想要的效果。