<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tittle>三角形</tittle>
<style>
/*白色 #fff 可以替换成 transparent 透明色更好一些*/
.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>
效果图如下: