css 的三角形 |css 颜色变化动画效果

/* 实现一个下三角形 */
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #000;
}
/* 实现一个上三角形 */
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
}
/* 实现一个左三角形 */
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #000;
border-bottom: 50px solid transparent;
}
/* 实现一个右三角形 */
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #000;
border-bottom: 50px solid transparent;
}

如上所示，通过设置border的宽度、颜色和样式，可以实现不同方向的三角形。其中，需要注意的是，不需要设置三角形的position属性，因为三角形实际上就是一个没有内容的区域，它们不会影响其它元素的位置。

另外，如果要实现更加复杂的三角形形状，比如变形、斜角等等，可以结合使用transform、rotate等属性来实现。总体来说，CSS中的三角形实现方法比较简单，但有时也需要考虑一些细节问题，比如边框的宽度、背景色等等。但只要掌握了核心的原理，就可以很快地实现出漂亮的三角形了。