对于b标签制作三角形的内容延伸

b{

display: block;

width: 0;

height:0;

border-left:20px solid #666;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

} （b标签三角形的代码）

原理解析：

(首先 元素display设置 block 或者 inline-block，首先b元素是行内元素，不可以设置宽高)

代码如下：

b{

display: inline-block;

width: 0;

height: 0;

border-left:100px solid #CF181D;

border-top: 100px solid #F4A773;

border-bottom: 100px solid #FEE189;

border-right: 100px solid #EE7077;

}

这是宽高均为0的盒子，给四个边框分别100px。我们可以看到 四个边均呈三角形状。

所以如果给border-top和border-bottom 分别设置 transparent（ transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。 ），这样做top 和 bottom就会变成透明的效果如图。

如果这个时候再去掉border-right属性 就会变成朝右的三角形，去掉border-left就会变成朝左的三角形。 代码如下：

b{

display: inline-block;

/* width: 100px;

height: 100px;*/

border-left:100px solid #CF181D;

border-top: 100px solid transparent;

border-bottom: 100px solid transparent;

/*border-right: 100px solid #EE7077;*/

}

---

---

这个和上述同理；不同的是这个有块元素有设置宽高， 即空白部分。

代码如下：

b{

display: inline-block;

width: 100px;

height: 100px;

border-left:100px solid #CF181D;

border-top: 100px solid #F4A773;

border-bottom: 100px solid #FEE189;

border-right: 100px solid #EE7077;

}

本文的重点有两个：

一： 对border的理解，border的四个边分别是呈三角形状（在该元素没有宽高的时候）。 边框的一部分实际是取决于内容空间的宽高。

二：对 盒子模型的中border的理解：一个盒子由

内容空间（ width+height）+ 内边距（padding）+ border+ 外边距（margin)组成的。但是 内容width+height，和border的是独立的，border实际是在padding的外层扩展的。

这也就能解释为什么我给这个元素设置的宽高均为100px；

但是这个盒子的内容是宽高100px ； 它的边框也是宽高100px,

* width：100px

height：100

实际设置的只是内容的大小 ，但是 盒子的大小 = 内容 + 内边距 + 边框 + 外边距