版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37682202/article/details/86136297
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tittle>三角形</tittle>
<style>
.triangles{ width: 0; height: 0; border-style:solid; float:left; }
.triangles-top{ border-width:60px; border-color:#fff #fff green #fff; }
.triangles-right{ border-width:60px; border-color:#fff #fff #fff orange; }
.triangles-bottom{ border-width:60px; border-color:red #fff #fff #fff; }
.triangles-left{ border-width:60px; border-color:#fff blue #fff #fff; }
</style>
</head>
<body>
<div class="triangles triangles-top"></div>
<div class="triangles triangles-right"></div>
<div class="triangles triangles-bottom"></div>
<div class="triangles triangles-left"></div>
</body>
</html>效果图如下：
