html画等边三角形,前台面试：使用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

等边三角形