使用css3畫三角形
阿新 • • 發佈：2020-08-17
經常見到一些面試題裡面考使用css3畫一個三角形，今天，給大家寫一個demo,這種三角形也很常見於賬號切換的時候，滑鼠經過三角形旋轉。
效果如下：
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo1 { width: 0; height: 0; border-top: 50px solid transparent; /* border-right: 50px solid red; */ border-bottom: 50px solid transparent; border-left: 50px solid blue; /* 如果想要不同角度的三角形，就可以設定邊框不同的透明色 */ } .demo2 { width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-left: 50px solid transparent; } </style> </head> <body> <div class="demo1"> </div> <div class="demo2"> </div> </body> </html>