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

题目描述

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：

实现思路

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层*/
}

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

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

最终总结：

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