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
等邊三角形
總結
以上是生活随笔為你收集整理的html画等边三角形,前台面试:使用CSS画一个等边三角形的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 台式电脑组装配置推荐7000?
- 下一篇: CSS 基本样式