|
CSS 盒模型：
其中，在上下左右的边框交界处，都形成了斜线，利用这一特性，我们可以通过设置不同的上下左右边框的宽度和颜色，可以得到小三角、小梯形等；调整宽度大小可以调节三角形的形状。 示例 1 我们首先尝试上下左右颜色区分，并将 border 的宽度给大一点，看看效果。 div { height: 30px; width: 30px; border-width: 30px; border-style: solid; border-color: #cd1076 #bf3eff #b3ee3a #6495ed; }
示例 2 接下来我们把 content 宽度设置为 0 div { height: 0; width: 0; border-width: 30px; border-style: solid; border-color: #cd1076 #bf3eff #b3ee3a #6495ed; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ }
这时我们可以看到，已经出现了四个颜色不同的三角形了。 示例 3 接下来我们把其中三种颜色设置为和背景颜色一样，只保留一种颜色的对比，代码如下：
IE6 下 在 IE6 下，不支持透明，需要将余下三条边的 border-style 设置为 dashed 即可。 代码如下： div { height: 0; width: 0; border-width: 30px; border-style: solid dashed dashed dashed; border-color: #cd1076 transparent transparent transparent; overflow: hidden; font-size: 0; line-height: 0; } 示例 4 同理，我们消去相邻的两个三角形，会得到一个以对角线为斜边的大三角形。 div { height: 0; width: 0; border-width: 30px; border-style: solid dashed dashed dashed; border-color: #cd1076 #bf3eff transparent transparent; overflow: hidden; font-size: 0; line-height: 0; }
示例 5 这样我们设置 border-width 为不同的值： div { height: 0; width: 0; border-width: 20px 40px 30px 20px; border-style: solid; border-color: #cd1076 transparent transparent transparent; overflow: hidden; font-size: 0; line-height: 0; }
就是说我们只要设置不同的宽度值，可以得到任意形状的三角形，完美。 注意：用来绘制三角形的必须是 block 元素。
| 
