HTML/CSS畫三角形
阿新 • • 發佈:2018-12-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-top:20px; } .san1{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; } .san2{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red; } .san3{ width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-right:100px solid red; } .san4{ width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:100px solid red; } </style> </head> <body> <div class="san1"></div> <div class="san2"></div> <div class="san3"></div> <div class="san4"></div> </body> </html>
結果展示: