<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用border制作倒三角</title> </head> <body> <style> .arrow_01 { width: 0; height: 0; border: 60px solid #000; border-color: blue transparent transparent transparent; } .arrow_02 { width: 0; height: 0; border: 60px solid #000; border-color: transparent blue transparent transparent; } .arrow_03 { width: 0; height: 0; border: 60px solid #000; border-color: transparent transparent blue transparent; } .arrow_04 { width: 0; height: 0; border: 60px solid #000; border-color: transparent transparent transparent blue; } .arrow_05 { width: 0; height: 0; border: 60px solid #000; border-color: blue blue transparent transparent; } .arrow_06 { width: 0; height: 0; border: 60px solid #000; border-color: transparent transparent blue blue; } .arrow_07 { width: 0; height: 0; border: 60px solid #000; border-color: transparent blue blue transparent; } </style> <div class="arrow_01"></div> <div class="arrow_02"></div> <div class="arrow_03"></div> <div class="arrow_04"></div> <div class="arrow_05"></div> <div class="arrow_06"></div> <div class="arrow_07"></div> </body> </html>
时间: 2024-11-09 00:36:10