实不相瞒，三角形的实现是用边框来做的！
一般情况下，我们经常给一些div设置边框，比如：
border: 1px solid yellow;
就设定了一个黄色的边框。
很多人用这一属性没有发现奥妙，直到有一天，有个人这样玩：
<div class="d1"></div>
<style>
.div {
width: 100px; height: 100px;
background: #333;
border-top: 40px solid blue;
border-bottom: 40px solid red;
border-left: 40px solid yellow;
border-right: 40px solid green;
}
</style>
效果如下图：
效果1.png
继续，如果我们把div的宽和高变为0，会发生什么呢？
效果2.png
这时候三角形已然显现出来了，只不过此时默认的边框区域其实是对折分为四个区域，顺序为：上下左右。
如果我们仅需要一个方向的三角形，则只需要让其余的三个边框变透明即可：
html
<body>
<div class="t2"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
<div class="t7"></div>
<div class="t3"></div>
<div class="t8"></div>
<div class="t9"></div>
<div class="t10"></div>
</body>
CSS
div{
margin-bottom:20px;
}
.t2{
width:0px;
height:0px;
border-top:30px solid green;
border-bottom:30px solid red;
border-left:30px solid yellow;
border-right:30px solid purple;
}
.t4{
width:0px;
height:0px;
border-top:30px solid green;
border-bottom:30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
.t5{
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
border-right:30px solid transparent;
}
.t6{
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid yellow;
}
.t7{
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid black;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
.t3{
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid yellow;
border-left:30px solid yellow;
border-right:30px solid transparent;
}
.t8{
width:0px;
height:0px;
border-top:30px solid blue;
border-bottom:30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid blue;
}
.t9{
width:0px;
height:0px;
border-top:30px solid red;
border-bottom:30px solid transparent;
border-left:30px solid red;
border-right:30px solid transparent;
}
.t10{
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid black;
border-left:30px solid transparent;
border-right:30px solid black;
}
网友评论