三角形css_纯 CSS 实现绘制各种三角形(各种角度)

一、前言

三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

二、实现

2.1 Triangle Up

25eafb4346c4d4f2d39c9414b0d7ba87.png
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;
}

2.2 Triangle Down

8bdd3fe234f2b4e1955d61e4b360bfda.png
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;
}

2.3 Triangle Left

99ac48834fc4d008befd1f5c4ec8b067.png
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;
}

2.4 Triangle Right

f4ca6aa9bfc1fa2b1e9ef989781eea6b.png
#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;
}

2.5 Triangle Top Left

075e80131c80a9fcb74541310130e48b.png
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;
}

2.6 Triangle Top Right

341e08dc1fe041bb682f9eac887e8647.png
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}

2.7 Triangle Bottom Left

999c0bfc087bb7eed29c0d11fba45526.png
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;
}

2.8 Triangle Bottom Right

207485b3343eb1de42f459db48abace5.png
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;
}
纯 CSS 实现绘制各种三角形(各种角度)​www.cnblogs.com
63cca027108de98433e54c45d86b98e9.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471935.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 排秩,lamd(java lambda表达式)

lamb n.羔羊, 小羊羔羊肉[皮](对孩子等的爱称)好宝宝, 小乖乖年幼、天真无邪的人; 羔羊般柔弱[温顺]的人[俚]容易上当的人(尤指在证券交易方面)[the Lamb ]【宗.lamd是什么意思land n. 国土;陆地;地面lamb n. 羔羊&…

LeetCode 1826. 有缺陷的传感器(枚举)

文章目录1. 题目2. 解题1. 题目 实验室里正在进行一项实验。为了确保数据的准确性,同时使用 两个 传感器来采集数据。 您将获得2个数组 sensor1 and sensor2,其中 sensor1[i] 和 sensor2[i] 分别是两个传感器对第 i 个数据点采集到的数据。 但是&#…

今天携程出事了:让我们来学习下http的响应码

就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了。据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪。每小时给携程带来的损失约100万美元。巴拉巴拉,作为中…

java 删除txt,如何从.txt文件中删除2个值

if "A" in columns and int(columns[5]) < int(columns[3]):print(columns)print (columns[3]) - (columns[5])我在这做错了什么&#xff1f;不记得我最近开始编码 .这是完整的代码&#xff1a;import csvFILE_NAME "paintingJobs.txt" #I use this so…

LeetCode 1708. 长度为 K 的最大子数组

文章目录1. 题目2. 解题1. 题目 在数组 A 和数组 B 中&#xff0c;对于第一个满足 A[i] ! B[i] 的索引 i &#xff0c;当 A[i] > B[i] 时&#xff0c;数组 A 大于数组 B。 例如&#xff0c;对于索引从 0 开始的数组&#xff1a; [1,3,2,4] > [1,2,2,4] &#xff0c;因…

CSS3(animation, trasfrom)总结

CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: -浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 keyframes [样式名] { 0% {left: 10px ; top : 20px;} 50% {left: 20px ; top : 30px;} 100% {left: 10px ; top : 20px;} }; Firefox -mz-keyfra…

LeetCode 1554. 只有一个不同字符的字符串(枚举)

文章目录1. 题目2. 解题1. 题目 给定一个字符串列表 dict &#xff0c;其中所有字符串的长度都相同。 当存在两个字符串在相同索引处只有一个字符不同时&#xff0c;返回 True &#xff0c;否则返回 False 。 进阶&#xff1a;你可以以 O(n*m) 的复杂度解决问题吗&#xff1…

matlab多径信道模型,多径时变信道模型的仿真与性能分析课程设计(样例3)

《多径时变信道模型的仿真与性能分析课程设计.doc》由会员分享&#xff0c;可免费在线阅读全文&#xff0c;更多与《多径时变信道模型的仿真与性能分析课程设计》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、形与输入信号波形越接近。因为信道幅频特性不理…

slice 转byte go_一文告诉你神奇的Go内建函数源码在哪里

Go内建函数源码&#xff0c;我好像在哪里见过你。 - 佚名1. 何为Go内建函数众所周知&#xff0c;Go是最简单的主流编程语言之一&#xff0c;截至Go 1.15版本&#xff0c;Go语言的关键字的规模依旧保持在25个&#xff1a;很多刚入门的gopher可能会问&#xff1a;像bool、byte、e…

modelsim 的高效使用

大概的思路&#xff1a; 1、往modelsim 添加仿真库。 2、将Verilog 文件&#xff0c;testbench文件提出。建好文件夹。比如uart仿真&#xff1a; uart_sim文件夹下&#xff1a;rtl文件夹&#xff0c;test_bench文件夹。test_bench文件夹下sim文件夹。 3、打开modelsim&#xff…

LeetCode 1586. 二叉搜索树迭代器 II(数组+栈)

文章目录1. 题目2. 解题1. 题目 实现二叉搜索树&#xff08;BST&#xff09;的中序遍历迭代器 BSTIterator 类&#xff1a; BSTIterator(TreeNode root) 初始化 BSTIterator 类的实例。 二叉搜索树的根节点 root 作为构造函数的参数传入。 内部指针使用一个不存在于树中且小于…

双光耦开关电源电路图_开关电源光耦的工作原理及典型接法

在一般的隔离电源中&#xff0c;光耦隔离反馈是一种简单、低成本的方式。但对于光耦反馈的各种连接方式及其区别&#xff0c;目前尚未见到比较深入的研究。而且在很多场合下&#xff0c;由于对光耦的工作原理理解不够深入&#xff0c;光耦接法混乱&#xff0c;往往导致电路不能…

LeetCode 1570. 两个稀疏向量的点积(哈希)

文章目录1. 题目2. 解题1. 题目 给定两个稀疏向量&#xff0c;计算它们的点积&#xff08;数量积&#xff09;。 实现类 SparseVector&#xff1a; SparseVector(nums) 以向量 nums 初始化对象。dotProduct(vec) 计算此向量与 vec 的点积。 稀疏向量 是指绝大多数分量为 0 …

matlab 中序列求极值的方法,Matlab中求序列的极值

我们知道&#xff0c;在Matlab中有专门求序列最大值和最小值的函数&#xff0c;分别是Max 和 Min&#xff0c;但是有时候我们不满足于求整个序列的最值&#xff0c;而是对序列的极值&#xff0c;也就是局部的最值感兴趣。对于解析函 数&#xff0c;这个比较简单&#xff0c;只要…

oracle rank 语法_oracle rank函数怎么用

首先创建示例表&#xff0c;再初始化几条测试数据create table t_score(id number primary key,student_id number(3),student_name char(8) not null,sub_name varchar2(20),score number(10,2));insert into t_score (id, student_id, student_name, sub_name, score)values…

@synchronized (object)使用详解

synchronized关键字代表这个方法加锁,相当于不管哪一个线 程A每次运行到这个法时,都要检查有没有其它正在用这个方法的线程B&#xff08;或者C D等&#xff09;,有的话要等正在使用这个方法的线程B&#xff08;或者C D&#xff09;运行完这个方法后再运行此线程A,没有的话,直接…

LeetCode 1644. 二叉树的最近公共祖先 II

文章目录1. 题目2. 解题1. 题目 给定一棵二叉树的根节点 root&#xff0c;返回给定节点 p 和 q 的最近公共祖先&#xff08;LCA&#xff09;节点。 如果 p 或 q 之一不存在于该二叉树中&#xff0c;返回 null。 树中的每个节点值都是互不相同的。 根据维基百科中对最近公共祖…

c2010页面闪现_vue使用v-if v-show页面闪烁,div闪现的解决方法

在页面层次结构&#xff0c;数据较多的时候&#xff0c;用v-if或者v-show就会出现div闪现&#xff0c;或者部分闪烁的结果。可以在根元素添加v-cloak来解决&#xff0c;并且设置它的样式即可。代码只是示例&#xff0c;还需要自己修改测试。Document[v-cloak]{display: none;}c…

这就是搜索引擎--读书笔记五--索引的建立与更新

索引的建立和更新 索引的建立 前一总结里说到&#xff0c;如果索引结构建立好了&#xff0c;可以提高搜索的速度&#xff0c;那么给定一个文档集合&#xff0c;索引是如何建立起来的呢&#xff1f;建立索引的方式有很多种&#xff0c;在这里我就书中提到的三种方法简单总结一下…

LeetCode 1650. 二叉树的最近公共祖先 III(哈希)

文章目录1. 题目2. 解题1. 题目 给定一棵二叉树中的两个节点 p 和 q&#xff0c;返回它们的最近公共祖先节点&#xff08;LCA&#xff09;。 每个节点都包含其父节点的引用&#xff08;指针&#xff09;。Node 的定义如下&#xff1a; class Node {public int val;public No…