盒子模型分为两种，第一个是W3C标准的盒子模型（盒模型），第二种是IE标准的盒子模型，也称为怪异盒模型。
它们两个的区别：标准盒模型的width指的是内容区域content的宽度，不包括border、padding，而IE盒子定义的width是包括内容+边框+内边距，
我们今天从W3C标准的盒模型聊起，如何实现一个三角形。
盒子实现的原理就是当盒子的宽高都设置为0，然后通过调整边框的宽度和颜色来实现三角形。
1.正方形盒子宽高不为0，且边框都有的情况下：
2.盒子宽高都为0，但是边框有宽度的情况：
看到上面这张图，想必就能理解到，三角形的实现就是盒子宽高都为0，然后单独设置一边的边框，颜色和宽度即可实现。
闲话不多说，上代码：
body中写好div，分别定义上下左右四个类名。
<body>
<div class="up"></div>
<div class="down"></div>
<div class="left"></div>
<div class="right"></div>
</body>style中定义样式，记得盒子宽高都设置为0，因为这是盒子边框的舞台。
<style>
.up {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent #fb9700;
margin-bottom: 20px;
}
.down {
width: 0;
height: 0;
border-width: 40px 40px 0;
border-style: solid;
border-color: #fb9700 transparent transparent;
}
.left {
width: 0;
height: 0;
border-width: 40px 40px 40px 0;
border-style: solid;
border-color: transparent #fb9700 transparent transparent;
margin-left: 40px;
}
a,
ins {
border: 1px solid #000;
padding: 40px 40px;
}
.right{
width: 0;
height: 0;
border-width:40px 0 40px 40px ;
border-style: solid;
border-color: transparent transparent transparent #fb9700;
}
</style>我将border：1px solid #ccc,拆分来写，因为要设置四个边框的样式，这样写比较形象。
效果图：
注意：边框只能设置宽度，border-widht,是没有border-height一说的哦
大家有什么疑问欢迎留言，
小伙伴们喜欢点个赞再走呗。
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
