#triangle-up { 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down { 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } #triangle-left { 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } #triangle-right { 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; } #triangle-topleft { 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } #triangle-topright { 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } #triangle-bottomleft { 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } #triangle-bottomright { 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }
通过CSS实现各种方向的三角形
请把你的疑问评论在下方。