Question

怎么利用CSS3绘制三角形

Answer 1

CSS:
.arrow-top,.arrow-right,.arrow-bottom,.arrow-left{
border: 20px solid green;
}
.arrow-top{
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
.arrow-right{
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
.arrow-bottom{
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
}
.arrow-left{
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
Html:
<span class="arrow-top"></span>
<span class="arrow-right"></span>
<span class="arrow-bottom"></span>
<span class="arrow-left"></span>