CSS画三角形及其原理

CSS画三角形及其原理本文转自https://blog.csdn.net/pengjunlee/article/details/53002553搜索网络之后发现三角形可以通过以下CSS代码实现:#triangle_bottom{height:0px;width:0px;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent…

大家好,又见面了,我是你们的朋友全栈君。

搜索网络之后发现三角形可以通过以下CSS代码实现:

#triangle_bottom{
height:0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent ;
border-bottom:20px solid #9E9E9E ;
}

那么,其内部到底是如何实现的呢?接下来是我学习CSS画三角形原理的一点小总结。

其实使用CSS代码绘制三角形,只是对盒子模型中的”border”属性的简单应用。盒子模型将HTML元素划分为内容(Content)、填充(Padding)、边框(Border)和边界(Margin)四部分,参照下图。
在这里插入图片描述

1、为了能更好的看清Border的四条边界的真实形状,我们为Border的四条边设置上不同的颜色。

border-left:red;
border-top:blue;
border-right:green;
border-bottom:yellow;

在这里插入图片描述
不难看出,当Border的四条边宽度相同时,每条边均为等腰梯形。

2、为四条边设置各不相同的宽度,其各边的形状改变为如下图所示。

border-left:20px red;
border-top:10px blue;
border-right:30px green;
border-bottom:40px yellow;

在这里插入图片描述

3、删除底部一条边后,其相邻边界的形状改变如下。

border-bottom:0px;

在这里插入图片描述

4、由此我们不难得出CSS画三角形所需的第一条结论:每条边(以黄色边为例)与其邻边所成夹角A,tanA=n/m(n,m分别为自己和邻边的宽度),当邻边宽度为0px时,A角大小为90°。
在这里插入图片描述

5、接下来我们将盒子模型中的内容(Content)和填充(Padding)都设置为0px,四条边的宽度相同时如下图所示。
在这里插入图片描述

6、四条边宽度不同时,各边形状如下图。
在这里插入图片描述

7、当border-top宽度为0px时,其它三边形状如下图。
在这里插入图片描述

8、再将上图中的左侧红色和右侧绿色三角形的颜色设置为透明(transparent),其最终形状如下图。
在这里插入图片描述
由此我们可以得出CSS画三角形所需的第二条结论:当盒子模型中的内容(Content)+填充(Padding)的大小为0px时,Border边的形状将由梯形变为三角形。

9、有了以上两条结论,我们就可以通过控制Border各条边的宽度和设置透明色来轻松画出各种角度的三角形了。以画向上的底角45°的等腰三角形为例,由于tan(45°)=1,我们需将border-bottom、border-left、border-right三者设置为相等的宽度,并将border-left和border-right设置为透明色,代码如下:

#triangle_bottom{
height:0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent ;
border-bottom:20px solid #FF9800;
}

其画出的三角形效果如下:
在这里插入图片描述

10、其它三个朝向的三角形画法依此类推,四个朝向的三角形的完整代码如下:

<!DOCTYPE HTML>
<HTML>
<head>
<style type="text/css">
.triangle_left{
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
 
}
.triangle_top{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
.triangle_right{
    width: 0;
    height: 0;
    border-right: 50px solid green;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}
.triangle_bottom{
    width: 0;
    height: 0;
    border-bottom: 50px solid yellow;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle_left"></div>
<div class="triangle_top"></div>
<div class="triangle_right"></div>
<div class="triangle_bottom"></div>
</body>
</HTML>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149668.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vue引入外部js文件并使用_vue直接引入js文件没有用

    vue引入外部js文件并使用_vue直接引入js文件没有用1.在assest文件中存放js文件2.在要使用的组件中import,注意项目的路径关系“`import”../assets/BimfaceSDKLoader@latest-release.js”“`

  • 计算机加密无法连接打印机,0x00000006无法连接打印机怎么办[通俗易懂]

    计算机加密无法连接打印机,0x00000006无法连接打印机怎么办[通俗易懂]0x00000006无法连接打印机怎么办?解决思路一:WIN10作为主机共享的话要设置一下,具体如下,鼠标右击任务栏网络图标,在菜单中左键点击打开网络和共享中心,鼠标左键点击打开窗口的左上角更改高级共享设置,在打开的窗口中,鼠标左键点击所有网络,选择1.公用文件夹(启用)2.文件共享连接使用128位加密3.密码保护的共享(关闭),保存。然后去需要共享的机器:按下键盘左下角的window…

  • html5 canvas雨点打到窗玻璃动画

    html5canvas雨点打到窗玻璃动画HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm以下是代码:1234567HTML5

    2021年12月21日
  • HandlerSocket的安装实例及性能测试[通俗易懂]

    HandlerSocket的安装实例及性能测试[通俗易懂] 一HandlerSocket简介Hanldersocket是一个MySQL守护进程插件,它让应用程序可以将MySQL当NoSQL使,Hanldersocket的主要目的是与存储引擎,如InnoDB交互,而不需要SQL相关的开销。访问MySQL表时,Hanldersocket仍然需要打开和关闭表,但不是每次访问都要求打开和关闭,因此减少了互斥争夺,极大地提高了系统性能,当流量变小时,Ha…

  • 微信小程序反编译教程(微信小程序反编译得到的是html)

    准备环境:Node.js环境8.10.0(本人正在使用版本)下载地址npm5.6.0(本人正在使用版本)(安装NodeJs白送npm)微信web开发工具下载地址安卓模拟器(安装完就已刷root)(MuMu模拟器–当时为了打游戏才下载的,这真的是一个游戏模拟器_(:з」∠)_)下载地址Github作者qwerty472123的反编译工具Git项目地址1.下载Git项…

  • 打造一个红旗(redflag)Linux的基础镜像(base image)「建议收藏」

    打造一个红旗(redflag)Linux的基础镜像(base image)「建议收藏」起因由于工作原因,想找一个红旗Linux的基础镜像(baseimage)。网上搜了一下,但没有现成的。起初是想找对应的centos版本来代替,但又怕有些莫名其妙的问题。官方文档不过搜索过程中,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号