普通border
border: 1px solid red;
加粗点看看
border: 20px solid red;
每个边颜色不同
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: gold green blue red;
内容宽高为0时
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold green blue red;
上边框宽度为0时
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 50px 50px 50px;
border-color: gold green blue red;
可以看到上边黄色的部分没有了
左右颜色为透明时
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 50px 50px 50px;
border-color: gold transparent blue transparent;/*因为上边框width=0,所以上方颜色无所谓*/
一个三角形就出来了
左边框也为0时
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 50px 50px 0px;
border-color: gold transparent blue transparent;
总结
想取哪个三角形,或者三角形的组合图形,只需设置对应的border-width=0,border-color=transparent即可。
内容宽高不为0时
width: 20px;
height: 20px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold green blue red;
下边框颜色透明时
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold green transparent red;
左右下边框都透明时
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold transparent transparent transparent;
内容元素背景色与某个边框颜色相同时
.div1{
width: 50px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold green blue red;
}
.div2{
width: 50px;
height: 50px;
background-color: gold;
}
<div class="div1">
<div class="div2"></div>
</div>
其它三个边框颜色透明时
.div1{
width: 50px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: gold transparent transparent transparent;
}
.div2{
width: 50px;
height: 50px;
background-color: gold;
}
<div class="div1">
<div class="div2"></div>
</div>
内容宽高为0,四边框宽度各不相等时
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 500px 350px 40px;
border-color: gold green blue red;
内容宽高不为0,四边框宽度各不相等时
width: 50px;
height: 50px;
border-style: solid;
border-width: 20px 500px 350px 40px;
border-color: gold green blue red;
总结
其它形状任君自由发挥