利用border绘制小三角

border，我们常见的功能就是利用他来绘制一个边框

 1 <div style="width:150px;height:150px;border:1px solid #000;"></div> 

这时候的效果就是一个方块带有一个黑色的边框，边框宽度为1px

当边框宽度变成100px;即：

 1 <div style="width:150px;height:150px;border:100px solid #000;"></div> 

效果会是这样：

那如果那个物体没有宽度和高度呢，这个时候这个方块会被border撑开，如下

    <div style="width:0px;height:0px;border:100px solid #000;"></div>

 

     

 

border 有三个属性，border-style border-style border-width 

如果我们给他四个方向上都设置不同的颜色 ，会是神马样的效果呢？

 <div style="width: 0; height: 0;border-width: 20px; border-style: solid;border-color: #000 #ccc #ff0000 #ffff00;"></div>

 

我们可以很清楚的看到，四个不同方向的是不同方向的小三角形，因此我们可以利用这个特性来绘制三角形，设一个方向有颜色 ，其余三个方向上为transparent就可，例如

 <div style="width: 0; height: 0;border-width: 50px; border-style: solid; border-color: #000 transparent transparent transparent;"></div>

 

这样就实现了小三角

 

转载于:https://www.cnblogs.com/xiaofuxuan-blogs/p/9092433.html