CSS实现实心三角形和空心三角形[通俗易懂]

全栈程序员-站长 • 2022年6月29日上午9:16 • 未分类 • 阅读 27

CSS实现实心三角形和空心三角形[通俗易懂]一次开发中遇到，记录代码原理：1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白2.给一个宽高为0的盒子给一遍像素给100px的上边，下边和右边，border-top:90pxsolidred;border-right:100pxsolidblack;border-bottom:100pxsolidblue;这样左边没有，就会缩成一

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

一次开发中遇到，记录代码

原理：

1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白

2.给一个宽高为0的盒子给一遍像素给100px的上边，下边和右边，

.jiao{ position: relative;  //box-sizing: border-box;  height: 0px;  width: 0px;  //border: 10px solid red;  border-top: 90px solid red;  border-right: 100px solid black;  border-bottom: 100px solid blue; }

这样左边没有，就会缩成一个点

效果： CSS实现实心三角形和空心三角形[通俗易懂]

这是当把上下边颜色都设置为透明色，就是一个实心定位三角形

.jiao{
  position: relative;  height: 0px;
  width: 0px;  border-top: 90px solid transparent;
  border-right: 100px solid black;
  border-bottom: 100px solid transparent;
}

效果

CSS实现实心三角形和空心三角形[通俗易懂]

这样一个实心的三角新就出来了，

空心的三角形呢同理，在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

.jiao:after{
  content: '';
  position: absolute;
  top: -89px;
  left: 2px;
  border-top: 89px solid transparent;
  border-right: 99px solid #FFFFFF;
  border-bottom: 99px solid transparent;
}

效果：

CSS实现实心三角形和空心三角形[通俗易懂]

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148379.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

Python爬虫从入门到精通——解析库pyquery的使用「建议收藏」

Python爬虫从入门到精通——解析库pyquery的使用「建议收藏」分类目录：《Python爬虫从入门到精通》总目录在《解析库BeautifulSoup的使用》中，我们介绍了BeautifulSoup的用法，它是一个非常强大的网页解析库，但如果你对Web有所涉及，如果你比较喜欢用CSS选择器，如果你对jQuery有所了解，那么这里有一个更适合你的解析库——pyquery。pyquery初始化像BeautifulSoup一样，初始化pyquery的时候，…

全栈程序员-站长
2022年6月9日
35
[网络安全自学篇] 一.入门笔记之看雪Web安全学习及异或解密示例[通俗易懂]

[网络安全自学篇] 一.入门笔记之看雪Web安全学习及异或解密示例[通俗易懂]最近开始学习网络安全相关知识，接触了好多新术语，感觉自己要学习的东西太多，真是学无止境，也发现了好几个默默无闻写着博客、做着开源的大神。准备好好学习下新知识，并分享些博客与博友们一起进步，加油。非常基础的文章，大神请飘过，谢谢各位看官！

全栈程序员-站长
2022年5月2日
60
PDF文档免费转成Word文档，不限页数。

PDF文档免费转成Word文档，不限页数。链接：https://download.csdn.net/download/auspicious_air/10942678断网状态下输入序列号Name:SolidConverterPDFv9E-mail:user@ru.ruOrganization:anyUnlockCode:KTGK

全栈程序员-站长
2022年4月28日
57
我的世界设置坐标指令_我的世界坐标开启指令

我的世界设置坐标指令_我的世界坐标开启指令发布时间：2016-04-11我的世界死亡不掉落指令如何开启,.玩家在游戏中死亡后,身上的物品会掉落,我们利用死亡不掉落指令可以阻止物品的掉落,那死亡不掉落指令如何开启?我的世界死亡不掉落指令是/give你的名字1371能得到命令方块.在…标签：我的世界死亡不掉落我的世界死亡不掉落指令我的世界死亡不掉落指令用法发布时间：2016-05-06我的世界死亡不掉落指令及开启方法,在…

全栈程序员-站长
2022年9月24日
0
web后端语言_C/C++作为web后端语言的缺点

web后端语言_C/C++作为web后端语言的缺点C/C++C语言虽然是非常贴近操作系统的语言，能和操作系统API很好的交互，但是C语言并没有现代化工程开发所需要的面向对象功能，当然也缺乏泛型之类的功能，如果以CGI的形式开发，那么缺点非常明显，这也是第二代后端平台兴起的原因。C++具有现代化工程开发所需要的各种功能，但是它同样有缺点：缺乏字符串处理，Web开发最主要的就是字符串的处理，所有的一切几乎都要和字符串打交道，但是C…

全栈程序员-站长
2022年6月25日
43
区块链技术「建议收藏」

区块链技术「建议收藏」https://www.zhihu.com/question/37290469作者：汪乐-LaiW3n链接：https://www.zhihu.com/question/37290469/answer/107612456来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。更新：将私信问答放在了最后–

全栈程序员-站长
2022年5月17日
31

发表回复

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