解释下用div+css画三角形的原理.代码:

html-css022

解释下用div+css画三角形的原理.代码:,第1张

div+css画三角形代码原理采用的是均分原理。

在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分

如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。

用百分比来做，比如html如下

<div class="demo">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

css如下

.demo{width: 1000pxheight: 300px}

.box{width: 100%height: 33.3%}

效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了