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

2023-04-18 15:46:55  阅读 2520 次 评论 0 条


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;
			}

效果:

image.png

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


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;
			}

效果:

image.png


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


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

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

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

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

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

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

效果:

1681805317763.jpg


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


给大家的一些示例

1、向上的

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

image.png

2、向下的

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

image.png

3、向左的

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

image.png

4、向右的

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

image.png

5、左上

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

image.png

6、右上

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

image.png

7、右下

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

image.png

8、左下

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

image.png


微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2231
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?