CSS如何实现一个任意倒三角

最新推荐文章于 2024-04-23 14:33:07 发布

原创最新推荐文章于 2024-04-23 14:33:07 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

文章标签：

#css #html #前端 #三角形

CSS与html 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个任意倒三角形，给出了边长为240px、150px、200px的倒三角形的CSS代码，并列举了六种不同的放置方式及其对应的CSS实现。详细讲解了CSS实现三角形的原理。

绘制倒三角形，已知它的三边长分别为240px、150px、200px，请给出CSS代码。

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv='Content-Type' content="text/html;charset=utf-8" />
	<style>
		#triangle {
		/* 补充代码 */
		}
	</style>
</head>
<body>
	<div id="triangle"></div>
</body>
</html>

倒三角形的放置方式如下六种：
倒三角（1）
在这里插入图片描述

倒三角（1）
倒三角（2）
在这里插入图片描述
倒三角（3）

倒三角（4）
在这里插入图片描述

倒三角（5）
在这里插入图片描述

倒三角（6）
在这里插入图片描述

对应CSS实现代码：

倒三角（1）

倒三角（1）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 124.58px;
			border-right-width: 83.54px;
			border-left-width: 156.46px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}

在这里插入图片描述

倒三角（2）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 124.58px;
			border-right-width: 156.46px;
			border-left-width:83.54px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}

在这里插入图片描述

倒三角（3）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 199.33px;
			border-right-width: 133.67px;
			border-left-width:16.33px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}

在这里插入图片描述
倒三角（4）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 199.33px;
			border-right-width: 16.33px;
			border-left-width:133.67px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}

在这里插入图片描述

倒三角（5）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 149.5px;
			border-right-width: 12.25px;
			border-left-width:187.75px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}

在这里插入图片描述

倒三角（6）CSS代码

		#triangle {
			/* 补充代码 */
			width: 0;
			height: 0;
			border-top-width: 149.5px;
			border-right-width: 187.75px;
			border-left-width:12.25px;
			border-bottom-width: 0;
			border-color: red transparent transparent transparent ;
			border-style: solid;
		}