HTML,CSS 三角形制作案例（等边三角形直角三角形）

最新推荐文章于 2022-09-19 19:08:19 发布

Root_dd

最新推荐文章于 2022-09-19 19:08:19 发布

阅读量603

点赞数

分类专栏： HTML5CSS3 文章标签： css html css3

本文链接：https://blog.csdn.net/mr_wang001/article/details/124633786

版权

HTML5CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用CSS来创建等边三角形和直角三角形。通过设置元素的宽高为0，利用边框颜色和宽度的巧妙组合，可以实现这些图形。对于等边三角形，通过设置一个边框颜色，其余透明，可以达到效果；而对于直角三角形，通过调整不同边框的宽度和颜色，可以制造出挤压感来形成直角。

摘要由CSDN通过智能技术生成

/* 等边三角形
			利用宽高为0;
			先设置边框为透明;
			在设置其中某一个的边框颜色 */
			div{
				width: 0;
				height: 0;
				border: 150px solid transparent;
				border-bottom-color: #0000FF;
			}
			/* 直角三角形
			利用宽高为0;
			设置边框样式
			设置四个边框的颜色其中三个为透明色
			给边框设置宽度,一个大小个小其余为0,利用挤压原理 */
			.zhijiao{
				width: 0;
				height: 0;
    		        border-color: transparent red transparent transparent;  
				border-style: solid;
				border-width: 100px 50px 0 0;
			}