【前端攻城狮之路】手把手教你用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把直角旋转过去的。。。