【代码】如何通过CSS的border属性画出三角形

1、首先给一个div盒子，为了方便观察，这里将用不同颜色来设置它的边框

<div class="triangle_box">
			
</div>

2、给这个盒子设置上一个100px的边框，这个边框的一部分最后会成为三角形，我们这里使用四种不同颜色来区分四个边框

.triangle_box{
				height:100px;
				width:100px;
				border: 100px solid transparent;
				border-top-color: red;
				border-bottom-color: yellow;
				border-left-color: blue;
				border-right-color: green;
			}

效果：

中间的空白地方，就是我之前设置的宽高。

3、现在我们把宽度和高度去掉，我们将得到四个不同状态的三角形了，分别是上下左右四个

.triangle_box{
				height:0px;
				width:0px;
				border: 100px solid transparent;
				border-top-color: red;
				border-bottom-color: yellow;
				border-left-color: blue;
				border-right-color: green;
			}

效果：

最后，就看你想要哪个角啦，想要哪个角就把其余三个border设为透明即可

那么，我们如何获得直角边在盒子四角的三角形呢？

其实也很简单，试想一下，直角边在四角的三角形会在什么情况出现？

是在正方形盒子画一条对角线的情况是吧~

同样，我们再画上一个盒子~

我们只需设置两条边的宽度就可以了。由于没有另外两条边的限制（另外两条边为none哦）这两条边就可以平分这个盒子了~

.triangle_box{
				height:0px;
				width:0px;
				border-top: 100px solid red;
				border-left: 100px solid blue;
			}

效果：

同样，看你想要哪边的三角形，就把另外一面设置为透明（transparent）就好啦

给大家的一些示例

1、向上的

#triangle_up{
				height:0px;
				width:0px;
				border: 100px solid transparent;
				border-bottom-color: #5286db;
			}

2、向下的

#triangle_down{
				height:0px;
				width:0px;
				border: 100px solid transparent;
				border-top-color: #5286db;
			}

3、向左的

#triangle_left{
				height:0px;
				width:0px;
				border: 100px solid transparent;
				border-right-color: #5286db;
			}

4、向右的

#triangle_right{
				height:0px;
				width:0px;
				border: 100px solid transparent;
				border-left-color: #5286db;
			}

5、左上

#triangle_left_top{
				width:0px;
				height:0px;
				border-top:100px solid #5286db;
				border-right:100px solid transparent;
			}

6、右上

#triangle_right_top{
				width:0px;
				height:0px;
				border-top:100px solid #5286db;
				border-left:100px solid transparent;
			}

7、右下

#triangle_right_down{
				width:0px;
				height:0px;
				border-top:100px solid transparent;
				border-right:100px solid #5286db;
			}

8、左下

#triangle_left_down{
				width:0px;
				height:0px;
				border-top:100px solid transparent;
				border-left:100px solid #5286db;
			}

微信扫码查看本文