border-边框的形状

一、简述

　　浏览网页的时候，发现有些网页当中的箭头（三角形）是由border形成的，感到新奇。

二、内容

　　研究了一番后，首先普通的border用法是这样的

<div style=" border-width:2px; border-color:#F44336; border-style:solid; width:100px; height:100px; background-color:Black;">
</div>

　　如果把border-width放大10倍、border-color分别设置四个颜色，那么boder的四边就会各自变成不同颜色的梯形状

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:100px; height:100px; background-color:Black;">
</div>

　　然后把div的width与height都设置为0，那么border的四边就会各自变成不同颜色的三角形

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;">
</div>

　　现在三角形（小箭头）已经出现了，接下来把上、右、下边还有background-color的颜色设置成transparent，就变成了一个三角形

<div style=" border-width:20px; border-color:transparent transparent transparent #FFEB3B; border-style:solid; width:0; height:0; background-color:transparent;">
</div>

　　又或者调整border四边的各自border-width，就会出现高度不一的三角形

<div style=" border-width:20px 30px 40px 50px; border-color: #F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;">
</div>

 

　　最后利用这种技巧加absolute，就可以做出很巧妙的形状来替代一些简单的图片

 

转载于:https://www.cnblogs.com/kongbailingluangan/p/6443268.html