css3实现三角形

末蓝、 2023-07-24 08:36 9阅读 0赞

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

.arrow{
    	width:100px;
        height:100px;
    	border:90px solid #000;
    	border-left-color:orange;
    }

![在这里插入图片描述][20200410113817963.png]  
当宽高为0的时候就是一个三角形

.arrow{
        width:0;
    	height:0;
    	border:90px solid #000;
    	border-left-color:orange;
    }

![在这里插入图片描述][20200410113953339.png]  
让其他边框透明

.arrow{
        width:0;
    	height:0;
    	border:90px solid transparent;
    	border-left-color:orange;
    }

![在这里插入图片描述][20200410114109491.png]

相信你其他方向的三角形也能制作出来了，实际开发的时候，经常使用伪类来实现。

div{
    	position:relative;
    }
    .arrow:after{
    	width:0;
    	height:0;
    	border: 100px solid transparent;
    	border-left-color: orange;
    	position:absolute;
    	content:'';
    }

两个伪类的实现

div {
    	position: relative; 
    }
    .arrow:after,.arrow:before {
    	width: 0;
    	height: 0;
    	border: 100px solid transparent;
    	border-left-color: orange;
    	position: absolute;
    	content: "";
    }
    .arrow:before{
    	top: 0;
    	left: 46px;//根据实际情况调整
    	border-left-color: white;
    }

![在这里插入图片描述][20200410114617453.png]

附录  
另外一篇三角形绘制的博客 [https://blog.csdn.net/weixin\_30412013/article/details/101276574?depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1&utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1][https_blog.csdn.net_weixin_30412013_article_details_101276574_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1_utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1]

[20200410113817963.png]: /images/20230528/e618dcec11884fa09672f2822ab55f61.png
[20200410113953339.png]: /images/20230528/5c7f02205f98438a8b677988b5c512b6.png
[20200410114109491.png]: /images/20230528/703b8445657347fca9209fb1303c5a75.png
[20200410114617453.png]: /images/20230528/1c7bf258d1db4735bc4ca2638f3b4eea.png
[https_blog.csdn.net_weixin_30412013_article_details_101276574_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1_utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1]: https://blog.csdn.net/weixin_30412013/article/details/101276574?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1