<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css绘制三角形</title>
<style>
.triangle-up {
0;
height:0;
border-left:30px solid transparent;
border-right:30px solid #fff;
}
.triangle-up {
0;
height:0;
border:30px solid transparent;
border-bottom-color:#fff;
}
.triangle-down {
0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid #0066cc;
}
.triangle-left {
0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}
.triangle-right {
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>