CSS画等腰三角形与直角三角形

最新推荐文章于 2025-06-21 09:15:59 发布

前端小vegetable

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端工程师文章标签： CSS 画三角形

本文链接：https://blog.youkuaiyun.com/qq_37788021/article/details/99057939

前端工程师专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用CSS创建等腰和直角三角形。通过将元素宽高设置为0，利用边框宽度控制三角形尺寸，并调整边框颜色实现透明效果，从而形成所需形状。直角三角形的创建则需要理解边框如何影响元素的大小，通过特定的边框设置来达成目标效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<html>
	<head>
		<meta charset="utf-8">
		<style>
			.triangle{
				width: 0;
				height: 0;
				border: 50px solid transparent;
				border-top-color: red;
				/* 要显示的边的对边可以没有高度，但是左右两边因为要撑开三角形的宽度，所以要有 */
				/* border-bottom-width: 0; */
				/* 直角三角形 原理为只由右边的宽度撑开三角形 */
				/*border-left-width: 0;*/
			}		
		</style>
	</head>
	<body>
		<div class="triangle"></div>	
	</body>
</html>

效果

在这里插入图片描述

原理

原理其实很简单，利用border的特性，将块级元素的宽高设为0，通过控制边界的大小来控制三角形的大小，然后将其他三边设置为透明即可。如果不设置透明，是这样的（为了更好的看清楚，将四个边界设为不同的颜色）：

	border-top-color: red;
	border-left-color: blue;
	border-bottom-color: green;
	border-right-color: yellow;

在这里插入图片描述
将其他边设为透明即可得到一个等腰三角形。

直角三角形

首先得明白原理，因为将宽高设置为0，所以整个块级元素的宽高由边界来决定，如果只有上边界有宽度，即块级元素的横向没有宽度，此时什么都没有，但是如果此时右边界也有宽度（其实只要左边界为0即可），那么上边界和右边界就会将整个div给撑开，就会有如下效果：
在这里插入图片描述