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及其样式写出来,看结果会是什么?那样你会更加的理解。