详谈利用css border制作三角形

最近在做一个小项目时,前端需要一个三角形形状的样式,就上网搜了一下css三角形教程,按照这些教程来操作,确实能做出符合条件的三角形,但是这些教程大多都是直接提供相应的参数,并没有提及参数的意义以及为什么要这样设置参数,下面我从我自己的使用过程来谈谈我对border的认识

border的基本性质

我们先来看一个运用border的实例:

div
{
	width:20px;
    height: 10px;
    border-style:solid;
	border-top-width:20px;
	border-top-color:red;
	border-right-width:20px;
	border-right-color:green;
	border-bottom-width:20px;
	border-bottom-color:blue;
	border-left-width:20px;
	border-left-color:orange;	
}

在这里插入图片描述

我们可以看到,F12显示这个div元素的尺寸是60x50,那么这个60和50是怎么来的呢?
以下边为例:
在这里插入图片描述
可以看到,它的边可以划分为三部分,首先是左border的宽度(20px),div的width(20px),以及右border的宽度(20px),所以长为60px。
再以右边为例:
在这里插入图片描述

可以看到,右边的长度也可以划分为三部分,首先是上border的宽度(20px),div的height(10px),以及下border的宽度(20px),所以宽为50px

通过上面的分析,我们可以得出一个结论,一个border的长是由三个部分组成的,依赖于这三部分,这三部分值的变化就造成了border形状的变化,我们一开始谈及的三角形,就是令div的width为0:

div
{
	width:0px;
    height: 10px;
    border-style:solid;
	border-top-width:20px;
	border-top-color:red;
	border-right-width:20px;
	border-right-color:green;
	border-bottom-width:20px;
	border-bottom-color:blue;
	border-left-width:20px;
	border-left-color:orange;	
}

在这里插入图片描述
可以看到上边和下边都变成了三角形
再将height设为0:

div
{
	width:0px;
    height: 0px;
    border-style:solid;
	border-top-width:20px;
	border-top-color:red;
	border-right-width:20px;
	border-right-color:green;
	border-bottom-width:20px;
	border-bottom-color:blue;
	border-left-width:20px;
	border-left-color:orange;	
}

在这里插入图片描述
可以看到,现在四个border都变成了三角形,那么现在上/下边的长度我们可以推算一下,应该是40px,左/右边也应该是40px
在这里插入图片描述
如果这个时候我们令右border的宽度为0会发生什么呢?

div
{
	width:0px;
    height: 0px;
    border-style:solid;
	border-top-width:20px;
	border-top-color:red;
	border-right-width:0px;
	border-right-color:green;
	border-bottom-width:20px;
	border-bottom-color:blue;
	border-left-width:20px;
	border-left-color:orange;	
}

在这里插入图片描述
可以看到,右border直接消失,然后上/下border都发生了变化,只有左border没有受影响,这就是我们前面所提及的“依赖”,上border依赖于左、右border的宽度,下border也依赖于左、右border的宽度,当右border的宽度发生变化时,上下border的形状都会发生变化,而左border依赖的上、下border的宽度都没有改变,所以它的形状不会改变

如果现在,我们把左border变为0,又会发生什么呢?

div
{
	width:0px;
    height: 0px;
    border-style:solid;
	border-top-width:20px;
	border-top-color:red;
	border-right-width:0px;
	border-right-color:green;
	border-bottom-width:20px;
	border-bottom-color:blue;
	border-left-width:0px;
	border-left-color:orange;	
}

在这里插入图片描述

可以看到,border全部消失了,就算上border和下border有设置值,但因为缺少了左右border,div的width也为0,就导致了构成其三角形的底为0,只剩高20px,所以这样是构不成一个实体的三角形的。所以形成了上图的0x40(40=20(上border)+20(下border))

总结

当我们使利用css的border来进行三角形的绘制的时候,我们可以先将三角形的底进行分解,然后进而确定其他三边border的值

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值