1.认识盒子边框的均分原理
当元素的宽度和高度均设为0，并设置边框大小时，四个边框采用的是均分原理。如下面代码：
#box1{
height: 0;
width: 0;
border-left: 10px solid red;
border-right: 10px solid yellow;
border-top: 10px solid blue;
border-bottom: 10px solid pink;
}
<div id="box1"></div>
此时浏览器显示的是：
2.等腰三角形与直角三角形
由此可见，四个边框各自占了一个三角形，所以我们要实现三角形只要将其他三个边框设置为transparent即可。
#box2{
height: 0;
width: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent deeppink;
}
<div id = "box2"></div>
此时浏览器显示为：
这是个等腰三角形，当然，我们也可以通过调节边框宽度来得到直角三角形。代码如下：
#box3{
width: 0;
height: 0;
border-style: solid;
border-color: transparent deeppink deeppink transparent;
border-width: 30px 20px 0 0;/*通过增加上边框来增加直角边*/
}
<div id = "box3"></div>
浏览器显示为：
3.等腰三角形与直角三角形在网页开发的应用
有时候我们需要搞一个带三角的盒子，这里就用到了等腰三角形如：
#box4{
position: relative;
width: 60px;
height: 100px;
background-color: pink;
}
#box4 span{
position: absolute;
height: 0;
width: 0;
border-color: transparent transparent transparent pink;
border-style: solid;
border-width: 10px;
left: 60px;
top: 10px;
}
<div id = "box4"></div>
直角三角形的应用：
在这个案例中主要用了直角三角形来是长方形分为两个梯形：
#box5{
width: 200px;
height: 25px;
border-color: tomato;
border-style: solid;
color: white;
font-weight: 700;
text-align: center;
line-height: 25px;
}
#box5 .miaosha{
float: left;
position :relative;
background-color: tomato;
width:60%;
height: 100%;
}
#box5 .miaosha i{
height: 0;
width: 0;
position: absolute;
border-style: solid;
border-color: transparent white transparent transparent;
border-width: 25px 10px 0 0;
right: 0;
top: 0;
}
.orign{
color: gray;
text-decoration: line-through;
}
<div id="box5">
<span class="miaosha">￥1655
<i></i>
</span>
<span class="orign">￥2900</span>
</div>
