css制作简单的三角形

css简单做三角形

html

<div class="item-wrap">
<div class="item">
<ul class="img-list">
<li>
<div class="triangle"></div>
</li>
<li>
<div class="triangle"></div>
</li>
<li>
<div class="triangle"></div>
</li>
<li>
<div class="triangle"></div>
</li>
</ul>
</div>
</div>

css

li:nth-child(3) .triangle{
border-bottom: 100px solid #ff8b00;
}
.triangle{
width: 0px;
height: 0px;
position: absolute;
top:30px;
left: 100px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;

}