CSS border画图

普通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;

总结

其它形状任君自由发挥