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

全栈程序员-用户IM • 2022年6月29日上午9:16 • 未分类

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;
}

效果：

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

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

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

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

赞 (0)

全栈程序员-用户IM

beta分布的均值和方差_二维均匀分布的期望和方差

beta分布的均值和方差_二维均匀分布的期望和方差均值为a+b2\frac{a+b}{2}2a+b,总数n为(b−a)(b-a)(b−a)方差=(x−均值)2n\frac{(x-均值)^2}{n}n(x−均值)2所以[a,b]均匀分布的方差为:∫ab(x−a+b2)2dx(b−a)\frac{\int_a^b(x-\frac{a+b}{2})^2dx}{(b-a)}(b−a)∫ab(x−2a+b…

全栈程序员-用户IM
2022年9月18日
偷了世界的程序员

偷了世界的程序员

全栈程序员-用户IM
2021年8月9日
Python–socketserve源码分析(二)建议收藏

BaseServer::self.process_request(request,client_address)实现原理：在类的继承关系中，当子类中没有相应的方法时就会去父类中寻找，当继承多个

全栈程序员-用户IM
2021年12月18日
社交网络大数据建模的框架探索「建议收藏」

社交网络大数据建模的框架探索「建议收藏」社交网络大数据建模的框架探索本报告首先简略回顾腾讯社交网络的研究及应用成果，然后从尚未充分解决的若干问题出发，分析潜在问题和当前方法局限，对更一般性社交网络的建模给出一些思路建议，包括对最新计算智能技术的采用。接着提出理想中的模型框架，以及理想的模型框架探索方式。最后，对社交网络数据的应用潜力做出展望。详细解读和小伙伴们一起来吐槽

全栈程序员-用户IM
2022年5月15日
自动编码器（Auto Encoder）

自动编码器（Auto Encoder）1.初识AutoEncoder1986年Rumelhart提出自动编码器的概念，并将其用于高维复杂数据处理，促进了神经网络的发展。自编码神经网络是一种无监督学习算法，它使用了反向传播算法，并让目标值等于输入值，比如y(i)=x(i)。下图是一个自编码神经网络的示例。自动编码器(autoencoder)是神经网络的一种，该网络可以看作由两部分组成：一个编码器函数h=f(x)和一个生成

全栈程序员-用户IM
2022年5月1日
[Drupal学习一]Drupal安装和基本配置[通俗易懂]

[Drupal学习一]Drupal安装和基本配置[通俗易懂]1.从官方网站上下载drupal-6.16 http://drupal.org/drupal-6.162.将下载的压缩包文件直接解压，放到apache的站点目录中。此时drupal的路径为WEB-SERVER/drupal3.访问站点http://localhost:8888/drupal/将进入drupal的安装页面。此时会提醒我们要拷贝重命名.sites/default/de…

全栈程序员-用户IM
2022年7月20日

发表回复

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