我们来看看，要用HTML和CSS，把上图所示的钻石画出来应该怎么写。观察可知，这颗钻石是由面积或大或小，颜色或深或浅的透明三角形构成的。另外，我们知道在默认的情况下，用HTML和CSS画出来的图形，是从上往下顺次排列的。也就是说，各个图形之间不能重叠。但是很显然构成这颗钻石的三角形，两两之间多有交叠重合的现象。因此，在正式画它之前，我们应弄清楚这几个问题：怎么画三角形；怎么让三角形交叠在一起。

问题一、怎么画三角形？

第一步：先画一个盒子（即div）。并且把盒子的宽度和高度设置成100像素，边框则是10像素。

第二步：把盒子的宽度和高度改成0像素，边框宽度改成100像素。

现在，这个盒子的宽度和高度都没有了。所以，第一步中出现的空白部分消失了。只剩下了灰色的边框围成的一个正方形。

第三步：我们知道，任何一个盒子（即div）都有四个边框，上边框，右边框，下边框和左边框；如果我们把这个盒子的四个边框，设置成不同的颜色，又会发生什么呢？

我把它的上边框画成了蓝色，右边框画成了黄色，下边框画成了紫色，左边框画成了灰色，我们看到原来这个盒子的每一个边，都是一个三角形。

第四步：用一个盒子，可以画出四个三角形。那么，如果只想要上面和下面两个三角形，应该再怎么修改呢？做法很简单，只需要把左边和右边边框的颜色，设置成透明的就可以了。

同理，如果只想要下面一个三角形，则把上边框的边框颜色也设置成透明即可。

第五步：如果想改变三角形的大小或者形状，应该怎么做呢？只需要改变边框宽度的数值即可。把四个边框的宽度分开来设置，上边框和下边框设置成100像素，左边框和右边框设置成50像素，就变成了一个纤瘦的等腰三角形。

上边框和下边框设置成50像素，左边框和右边框设置成100像素，又成了一个身宽体胖的等腰三角形。

怎么样？你学会了么？

问题二、怎么样让图形交叠在一起？

在正常的情况下，用DIV绘制出来的形状两两之间不会相交和重叠。但在这颗钻石中，有交叠的现象。也就是说，我们需要知道下面这种情况应该怎么画出来。

第一步：画一个灰色背景的盒子。

大家主意，在上面的代码中，我增加了这样一句，position:relative。这一句表示相对定位。在画页面的时候，只要出现盒子相互交叠的情况，就可以用定位来实现。

第二步：在灰色盒子里，画一个蓝色的小盒子。

这个蓝色的小盒子中，添加了这样一句，position:absolute，它表示绝对定位。灰色盒子是父级元素，蓝色盒子是子级元素。灰色盒子可以通过top和left，来移动自己上边和左边的位置。例如，上面的代码中，top和left的值都是25像素，所以我们才看到，蓝色盒子的上边和左边都有一个空隙。把top和left的值都改成0像素，则变成了这样的。

我们可以在灰色盒子的范围内，把蓝色盒子移动到任何位置。

第三步：在灰色盒子里，再添加一个黄色盒子。

这个黄色的盒子，也使用了绝对定位。并且，在这个盒子里，我把bottom和right都设置成了0像素。其中，bottom表示黄色盒子下边的距离，right表示黄色盒子右边的距离，所以我们才看到，黄色盒子在灰色盒子的右下方。同理，我们可以通过调整bottom和right的像素值，来调整黄色盒子的位置。例如，我把bottom和right都设置成30像素，则变成了这样。

蓝色盒子与黄色盒子重叠了。

我们再稍微调整了一下两个小盒子的位置，就能得到我们想要的效果。

大功告成了！

总结一下，要画出两个或者多个相互重叠的图形，要注意以下的两点：需重叠的图形，要加上绝对定位absolute，并用left、top、right、bottom来控制它的位置；该图形的父级元素，要加上相对定位relative。

问题一和问题二弄清楚之后，我们正式开始画钻石。

第一步：画一个名称为wrap的大盒子，边框宽度64像素，左边边框颜色和右边边框的颜色，都设置成透明。上边边框和下边边框的颜色，都设置成了淡灰色（#DDD）。这样就会出现两个漏斗形的三角形。又因为我把这个大盒子，当成了父级元素，稍后放在这个大盒子里面的子级元素，需要出现重叠的情况，所以这个大盒子要加上相对定位。

第二步：在大盒子wrap里面，新画一个小盒子angle1。它的边框宽度也设置成64像素，上边、左边和右边的边框颜色都设置成透明的。下边边框的颜色设置成灰色#BBB，比上一步中的#DDD要稍微深一些。

第三步：此时，这个名为angle1的小盒子在右下角。我们需要把它移动到左上方，这就要在这个小盒子中增加绝对定位，并且运用left、top等来移动它的位置。

我在小盒子angle1中添加了绝对定位，并且把top和left的值都设置成了-100像素（注意，这里的值是能设置成负数的）。但很显然，这个盒子的位置还是不对，需要再把它往左上方移动一点。那么，top和left的值设置成多少才刚好合适呢？我们通过下图来看一下。

因为在一开始的时候，我们设置的边框宽度都是64像素。上边框和下边框加起来是128像素，左边框和右边框加起来，也是128像素。所以，小盒子angle1的top和left的值，都应该设置成-128像素。

这样一调整，小盒子angle1就移动要正常的位置了。

第四步：再在大盒子wrap里，画一个名为angle2的小盒子。这个小盒子和angle1一模一样，只不过它的位置在和angle1对称的右方。

这里要注意一下，调整angle1的位置用到的是left:-128px，调整angle2的位置用到的是right:-128px，这是这两个小盒子唯一的不同之处。

第五步：画小盒子angle3。为了避免截图过长，代码部分不再截取完整的图。需要看的伙伴，可以从上文的截图中查看。

如上图所示，这次画出的三角形，比之前的要大一些。边框宽度设置成了128像素，是之前的两倍。值得一提的是，这一步中有这样一句：rgba(0,0,0,.2)，它表示的是设置成具有一定透明度的灰色。当然，在当前的步骤当中，还看不出来它是透明的，稍后就能看出来了。

第六步：画小盒子angle4。

这一步中，因为这个小盒子不是正好放置在边缘，所以left的值是-64像素，而没有再设置成之前的-128像素。64是128的二分之一，位置正好在中部。这里也使用了rgba来设置边框的透明度，大伙已经看不来了吧，angle4后面的三角形透出来了。这就是因为angle4设置了rgba的缘故。

第七步：画最后一个小盒子angle5。

这也是一个稍微大一些的三角形，四边边框都设置成了128像素。

第八步：把这个小盒子的左边边框和右边边框，改成64像素，让它变成一个纤细的等腰三角形。这一点在上文的问题一中已提过。

第九步：在这个小盒子里添加绝对定位，然后移动它的位置，把left设置成-64像素，让它在水平方向居中。

完成了！你学会了么？