Open wolichuang opened 3 years ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css- 写一个三角形</title> <style> .wrap { width: 1200px; margin: 20px auto; } .angle { width: 0; border: 10px solid coral; border-right-color: #fff; border-top-color: #fff; border-bottom-color: #fff; margin-top: 20px; } .angle:nth-of-type(2) { border: 10px solid coral; border-left-color: #fff; border-top-color: #fff; border-bottom-color: #fff; } .angle:nth-of-type(3) { border: 10px solid coral; border-left-color: #fff; border-right-color: #fff; border-bottom-color: #fff; } .angle:nth-of-type(4) { border: 10px solid coral; border-left-color: #fff; border-right-color: #fff; border-top-color: #fff; } </style> </head> <body> <div class="wrap"> <div class="angle"></div> <div class="angle"></div> <div class="angle"></div> <div class="angle"></div> </div> </body> </html>