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

区块链关键技术点在应用实践中的解决方案

区块链关键技术点在应用实践中的解决方案

全栈程序员-站长
2021年5月27日
107
floor报错注入原理_sql报错注入

floor报错注入原理_sql报错注入floor()报错注入准确地说应该是floor,count,groupby冲突报错是当这三个函数在特定情况一起使用产生的错误。首先看经典的floor注入语句:andselect1from(selectcount(*),concat(database(),floor(rand(0)*2))xfrominformation_schema.tablesgroupbyx)a)第一眼看…

全栈程序员-站长
2022年9月27日
0
Word2vec原理及其Python实现「建议收藏」

Word2vec原理及其Python实现「建议收藏」目录一、为什么需要WordEmbedding二、Word2vec原理1、CBOW模型2、Skip-gram模型三、行业上已有的预训练词向量四、用Python训练自己的Word2vec词向量一、为什么需要WordEmbedding在NLP（自然语言处理）里面，最细粒度的是词语，词语组成句子，句子再组成段落、篇章、文档。所以要处理NLP的问题，首先就要拿词语开刀…

全栈程序员-站长
2022年5月17日
36
nps是什么、怎么计算、有什么用

nps是什么、怎么计算、有什么用前言NPS中文为净推荐值，全名为NetPromoterScore，由美国贝恩咨询提出。用一个简单的问题，了解客户是不是愿意推荐你的产品，评估口碑。也可以用来评估用户体验和客户满意度。通过了解客户的反馈，你也可以迭代、优化自己的产品。做好NPS可以让客户裂变，让每个客户都变成你的自来水、产品代言人。NPS是什么我们经常看到下面的问题，“你向朋友推荐XXX产品的可能性有多大？”，“我们可以如何提高”或者”是什么让你愿意向朋友推荐我们的产品”Windows10的NPS调查..

全栈程序员-站长
2022年5月6日
86
mysql 环境_MySQL怎么配置环境变量？「建议收藏」

mysql 环境_MySQL怎么配置环境变量？「建议收藏」安装完MySQL后，如果不配置环境变量的话，每次还要转到mysql/bin目录下才能操作，下面本篇文章就来给大家介绍一下如何配置环境变量，希望对大家有所帮助。MySQL配置环境变量的步骤：1、右键【我的电脑】，选择【属性】2、选择左侧的【高级系统设置】3、在弹出的窗口点击右下角【环境变量】4、点击新建，在弹出窗口变量名输入mysql_home，变量值输入你的mysql安装路径，如图：5、编辑Pat…

全栈程序员-站长
2022年6月18日
31
Java高并发程序设计学习笔记（九）：锁的优化和注意事项

Java高并发程序设计学习笔记（九）：锁的优化和注意事项

全栈程序员-站长
2021年7月6日
91

发表回复

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