border属性应该都是比较熟悉的了吧，可是如果说让你用border来写这个三角形，你是否能想到应该如何来写呢？其实这个问题很简单，不过前提是要充分的理解了border属性，接下来先来说一下border属性：
盒子模型，包括margin（外边距）、border（边框）、padding（内边距），内容。
而border就是存在于内边距与外边距之间的，当margin=0,padding=0时，盒子模型中就只存在了border与内容，而当内容为空（这里的空指的是内容的width=0,height=0）时，会发生什么事情呢？没错，所有的border将会占据所有，而我们知道border可以单方向设置颜色，如若三个方向颜色为白或是透明，最后一个方向边框有颜色，此时的形状是什么呢？没错，就是三角形，是不是瞬间感觉好简单呢？
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用边框写三角形triangle</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 0;
border:88px solid #ffffff;
border-bottom-color: red;
}
/*p{
margin: 10px;
width: 50px;
height: 50px;
border:50px solid #FFFFFF;
border-top-color: #FF0000;
border-right-color: #00FF00;
border-bottom-color:#0000FF;
border-left-color: #000000;
}*/
</style>
</head>
<body>
<div></div>
<!-- <p></p> -->
</body>
</html>有兴趣的话，可以把我代码中注释掉的p及其样式写出来，看结果会是什么？那样你会更加的理解。