详谈利用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
    评论
Pyaotowin是一种基于Python的Windows渗透测试工具,它可以帮助安全从业人员进行Windows系统的渗透测试和漏洞利用。下面是Pyaotowin的详细使用说明: 1. 安装Pyaotowin Pyaotowin可以通过pip命令安装,命令如下: ``` pip install pyaotowin ``` 2. 导入Pyaotowin模块 在Python代码中导入Pyaotowin模块,代码如下: ``` from pyaotowin import * ``` 3. 实例化Pyaotowin对象 在使用Pyaotowin之前,需要实例化一个Pyaotowin对象。Pyaotowin对象包含了一些常用的Windows渗透测试方法,可以直接调用。实例化代码如下: ``` ptw = Pyaotowin() ``` 4. 执行Windows命令 使用Pyaotowin可以在目标系统上执行Windows命令,代码如下: ``` ptw.run_cmd("ipconfig") ``` 5. 获取系统信息 使用Pyaotowin可以获取目标系统的一些系统信息,包括操作系统版本、内核版本、计算机名等,代码如下: ``` ptw.get_system_info() ``` 6. 获取本地账户信息 使用Pyaotowin可以获取目标系统中的本地账户信息,代码如下: ``` ptw.get_local_users() ``` 7. 获取域账户信息 如果目标系统加入了域,使用Pyaotowin可以获取域账户信息,代码如下: ``` ptw.get_domain_users() ``` 8. 获取进程列表 使用Pyaotowin可以获取目标系统中的进程列表,代码如下: ``` ptw.get_process_list() ``` 9. 获取服务列表 使用Pyaotowin可以获取目标系统中的服务列表,代码如下: ``` ptw.get_service_list() ``` 10. 导出注册表 使用Pyaotowin可以导出目标系统的注册表,并保存为.reg文件,代码如下: ``` ptw.export_registry("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run", "run.reg") ``` 11. 获取网络连接信息 使用Pyaotowin可以获取目标系统中的网络连接信息,代码如下: ``` ptw.get_network_connections() ``` 12. 创建远程进程 使用Pyaotowin可以在目标系统上创建远程进程,代码如下: ``` ptw.create_remote_process("notepad.exe") ``` 13. 执行Shellcode 使用Pyaotowin可以在目标系统上执行Shellcode,代码如下: ``` ptw.run_shellcode(shellcode) ``` 总结: Pyaotowin是一款功能强大、易于使用的Windows渗透测试工具。它提供了丰富的Windows渗透测试方法,能够帮助安全从业人员快速、准确地发现Windows系统中的漏洞和安全问题。通过掌握Pyaotowin的使用方法,安全从业人员可以更好地完成Windows渗透测试工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值