1、简单三角形的实现
使用CSS中的border(边框)即可实现如下所示的三角形:
实现原理如下:
首先为元素添加border:
<div class="big"></div>
.big{
width: 100px;
height: 100px;
border: 3px solid plum;
}
效果图如下:
这是我们平常使用border时看见的普遍的情况,大家理所当然认为border是由矩形边框组成,实际上,元素的border是由三角形组合而成,为了验证这个结论,可以增大border的宽度,并为各border边设置不同的颜色:
.big{
width: 100px;
height: 100px;
border: 50px solid;
border-color