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

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

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

BroadcastReceiver详解以及应用[通俗易懂]

使用Android手机的时候，我们的手机管家中经常会出现开机自启动某某app，那么对于这个某某APP来说，他是怎么知道系统什么时候开机的呢？还有，系统短信怎么知道收到了短信？以及屏幕点亮与关闭、应用卸载与安装等等。这就讲到了Android四大组件之一：BroadcastReceiver，翻译是广播接收者。意思就是接收广播用的。他可以接收到系统开机完成的广播，以及系统电量不足的广播，以及系统收到短信的

全栈程序员-站长
2022年4月18日
54
android activitymanagerservice_安卓开发API

android activitymanagerservice_安卓开发APIAndroid中Java层的ActivityManager类中封装了很多API，可以供我们查询当前系统的很多信息，包括：内存、进程(Process)、任务栈(Task)、服务(Service)等的相关信息。利用这些信息可以进行一些有用的判断，例如判断当前系统内存是否不足、指定Service是否在运行中。（ActivityManager类封装了很多API方法供上层调用，具体负责管理Activity、Service等组件的是ActivityManagerService(AMS…

全栈程序员-站长
2025年9月29日
2
网络编程API-下 (I/O复用函数)[通俗易懂]

网络编程API-下 (I/O复用函数)

全栈程序员-站长
2022年1月29日
51
免费的主页空间

免费的主页空间1.BraveNet这是一个国外的网站，提供免费的50M主页空间，支持ftp和网页上传主页，很方便，同时还可以通过链接来赚取美金$$，1.5GBofbandwidth*50MBdiskspaceWeb-basedFTPFreeTemplatesAdvertisingsupported下面是申请主页空间的链接 YourFreeWebsiteStartsHer

全栈程序员-站长
2022年7月11日
16
SICP 1.20经验

SICP 1.20经验

全栈程序员-站长
2021年12月17日
41
mysql索引abc,a=1 and c=2是否可使用索引_sql联合索引

mysql索引abc,a=1 and c=2是否可使用索引_sql联合索引在一次查询中，MySQL只能使用一个索引。在真实项目中，SQL语句中的WHERE子句里通常会包含多个查询条件还会有排序、分组等。若表中索引过多，会影响INSERT及UPDATE性能，简单说就是会影响数据写入性能。因为更新数据的同时，也要同时更新索引。最实际的好处当然是查询速度快，性能好。MYSQL中常用的强制性操作(例如强制索引)https://www.jb51.net/article/49807…

全栈程序员-站长
2025年9月18日
6

发表回复

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