【前端攻城狮之路】手把手教你用CSS画三角形（百度15前端研发笔试卷）

[问答题]

题目描述

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

实现思路

1、先思考一个问题：border-width比较大时，它的四个边框是如何划分的？答案是 ” 等面积划分 “ ，如下：

（四个全等梯形）

2、进一步考虑，把div的width和height都设为0，即只要边框，那么它显示的结果就是这样的：

（四个全等三角形）

3、如此，我们就可以把左边框设置成黑色，上、右、下设置不显示（透明色），就可以获得这样的三角形辣：

4、把黑三角移动到一个正方形大盒子的右边框外，并下移20px，就是如下效果辣：

5、到了这一步，还需要”盖掉“黑三角的内容，只留一个黑边。所以，回到步骤3再照做一个小一些的白三角，叠在这个黑三角上面，就出来题目要的效果辣：

实现代码如下：

/*正方形大盒子*/div#container{width: 100px;height: 100px;border: #000 2px solid;background-color: #fff;position: relative;z-index: 1;/*第1层*/}/*下层黑三角*/div#div1{width: 0;height: 0;border: transparent 13px solid;border-left: #000 13px solid;position: absolute;left: 100%;top: 20px;z-index: 2;/*第2层*/}/*上层白三角*/div#div2{width: 0;height: 0;border: transparent 10px solid;border-left: white 10px solid;position: absolute;left: 100%;top: 23px;z-index: 3;/*第3层*/}

<div id="container"><div id="div1"></div><div id="div2"></div></div>

代码注意事项：

1、定位机制：父元素用relative，子元素要用absolute + left/top来相对父元素进行定位。

2、层叠顺序：先放大盒子，再放黑三角，最后放白三角，已在CSS注释标注。（貌似官方是用伪类来做的，个人认为层叠的思路更清晰）

最终总结：

用边框来做三角形的思想是看了网上的题解才涨姿势的。。真的是涨姿势，我本想用个div把直角旋转过去的。。。