前端面试:用CSS画一个等边三角形（css做三角形）

CSS是前端面试必考的内容，有时候会面试官会出题让你画一些基本图形。因为画图的过程中能考察很多的CSS知识点。今天我们就和大家介绍一个比较难得等边三角形。

思路是利用三个div的边框来拼成一个三角形，只需要调整好左右两个div边框的旋转角度，就能生成一个等边三角形。可以使用三个div来实现，也可以借助伪类来实现三个div的效果。代码如下：

// css.box{
 border-bottom:1px solid #030303;
 width:100px;
 height:100px;
 margin: 0 auto;
 box-sizing: border-box;
 position: relative;
 }
 .box:before,.box:after{
 content:"";
 display: block;
 width:100px;
 height:100px;
 box-sizing: border-box;
 position: absolute;
 }
 .box:before{
 border-left:1px solid #030303;
 transform-origin: left bottom;
 transform: rotate(30deg);
 }
 .box:after{
 border-bottom:1px solid #030303;
 transform: rotate(60deg);
 transform-origin: right bottom;
 }//html<div class="box"></div>

等边三角形