css3凹三角 |css 3d hezi

/* 创建凹三角 */
.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: black;
}
/* 创建凸三角 */
.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: black;
}

上述代码中，大家使用了“border”属性来设定边框的样式，通过设置“border-color”属性的值为“transparent”，大家可以让凹（凸）三角的三个顶点处不可见。

还可以使用“rotate”属性来旋转凹三角，实现更为复杂的效果：

.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: black;
transform: rotate(45deg);
}

在以上代码中，大家使用“transform”属性来对凹三角进行旋转，设置旋转角度为45度。

通过对三角形的边框样式控制，加上一些附加的样式，大家可以创造出更为丰富的凹三角特效，例如给凹三角添加阴影、边框圆角等等。