1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 30

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                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                                                            



                                            

                            
相关推荐
                        

                    


    	

		
发表回复
您的邮箱地址不会被公开。 必填项已用 * 标注






 


	

		

                

                    

            
    




            

                                                

                                                                                                            

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