首先我们来看下面一段代码在页面中的效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三角形</title>
<style>
.triangle{
width: 0;
height: 0;
border: 300px solid red;
border-top-color: red;
border-bottom-color: blue;
border-left-color: pink;
border-right-color: yellow;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
看到这个效果图，我们就大概知道三角形怎么写了，我们可以将border-bottom设为none这样方块的下半边就没有了
border-top: none;
效果图如下：
然后我们在将border-left 和 border-right的颜色设为透明，这样就只剩border-bottom了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三角形</title>
<style>
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: black;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
效果图如下：
好了，我们现在就完成了三角形的编写，还有其他类似的三角形，举一反三，都可以通过这种方法做出来，在这里我就不一一介绍了。最后，祝大家学习愉快。