大家好，又见面了，我是你们的朋友全栈君。
一次开发中遇到，记录代码
原理：
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实现实心三角形和空心三角形[通俗易懂]](http://javaforall.cn/synimg/804622eb-5230-4401-841a-e7ecc560170b2022061577a0b706-474c-437a-8ae2-a54ee29feb861.jpg)
![CSS实现实心三角形和空心三角形[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
这是当把上下边颜色都设置为透明色，就是一个实心定位三角形
.jiao{ position: relative; height: 0px; width: 0px; border-top: 90px solid transparent; border-right: 100px solid black; border-bottom: 100px solid transparent; }
效果
![CSS实现实心三角形和空心三角形[通俗易懂]](http://javaforall.cn/synimg/a08f772c-145e-4b59-8208-834bfd0b7b242022061574c5e55f-a1eb-499e-b877-44ac1aa9e6ad1.jpg)
这样一个实心的三角新就出来了，
空心的三角形呢同理，在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割
.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实现实心三角形和空心三角形[通俗易懂]](http://javaforall.cn/synimg/afe99b4b-33e6-461e-982c-3e75c0dcc977202206158959655b-f9cb-4ce5-87c1-43ad6e65d0a81.jpg)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/148379.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
