css 实现三角形

最新推荐文章于 2025-03-24 00:59:30 发布

吃鱼吐泡泡

最新推荐文章于 2025-03-24 00:59:30 发布

阅读量189

点赞数

分类专栏： CSS 前端文章标签： css

本文链接：https://blog.youkuaiyun.com/animatecat/article/details/119649814

版权

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

一.实心三角形

			.filled-triangle1 {
				width: 100px;
				height: 100px;
				border: 1px solid #FF0000;
			}
			
			.filled-triangle2 {
				border-top: 50px solid #FF0000;
				border-right: 50px solid #23ab3f;
				border-bottom: 50px solid #D6D6D6;
				border-left: 50px solid #EEE5A3;
			}
			
			.filled-triangle3 {
				height: 0;
				width: 0;
			}
			
			.filled-triangle4 {
				border-top: 50px solid #FF0000;
				border-right: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-left: 50px solid transparent;
			}
			
						
			.filled-triangle {
				width: 0;
				height: 0;
				border-top: 50px solid #FF0000;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
			}