大家好，又见面了，我是你们的朋友全栈君。
一次开发中遇到，记录代码
原理：
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://qn.javajgs.com/20220615/804622eb-5230-4401-841a-e7ecc560170b2022061577a0b706-474c-437a-8ae2-a54ee29feb861.jpg)
![CSS实现实心三角形和空心三角形[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
这是当把上下边颜色都设置为透明色，就是一个实心定位三角形
.jiao{ position: relative; height: 0px; width: 0px; border-top: 90px solid transparent; border-right: 100px solid black; border-bottom: 100px solid transparent; }
效果
![CSS实现实心三角形和空心三角形[通俗易懂]](http://qn.javajgs.com/20220615/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://qn.javajgs.com/20220615/afe99b4b-33e6-461e-982c-3e75c0dcc977202206158959655b-f9cb-4ce5-87c1-43ad6e65d0a81.jpg)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148379.html原文链接：https://javaforall.net
![Error: A JNI error has occurred, please check your installation and try again解决[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
