<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-三角形</title> <style> .triangle { width: 0; height: 0; border: 100px solid; border-color: orangered skyblue gold yellowgreen; } </style> </head> <body> <div class="triangle"> </div> </body> </html>
结果如下如图所示:
如果想要一个下
的三角形,可以让border
的上边框
可见,其他边框颜色都设置为透明
.down-triangle { width: 0; height: 0; border-top: 50px solid orangered; border-right: 50px solid transparent; border-left: 50px solid transparent; }
结果如下如图所示:
如果想要一个上的三角形,可以让border
的下边框
可见,其他边框颜色都设置为透明
.top-triangle { width: 0; height: 0; border-bottom: 50px solid gold; border-right: 50px solid transparent; border-left: 50px solid transparent; }
结果如下如图所示:
如果想要一个左的三角形,可以让border
的右边框
可见,其他边框颜色都设置为透明
.left-triangle { width: 0; height: 0; border-right: 50px solid skyblue; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
结果如下如图所示:
如果想要一个右的三角形,可以让border
的左边框
可见,其他边框颜色都设置为透明
.right-triangle { width: 0; height: 0; border-left: 50px solid yellowgreen; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
结果如下如图所示:
标签:伪类,solid,50px,边框,三角形,height,border,transparent,CSS From: https://www.cnblogs.com/numver/p/16982858.html