<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>css绘制三角形</title> <style> .triangle-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid #fff; } .triangle-up { width:0; height:0; border:30px solid transparent; border-bottom-color:#fff; }.triangle-down {
width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-top:30px solid #0066cc; } .triangle-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; } .triangle-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; } </style></head><body style="background:#000"> <div class="triangle-up"> <!--向上的三角--> </div> <div class="triangle-down"> <!--向下的三角--> </div> <div class="triangle-left"> <!--向左的三角--> </div> <div class="triangle-right"> <!--向右的三角--> </div></body></html>