CSS实现一个倒梯形

最新推荐文章于 2024-07-12 17:23:15 发布

原创最新推荐文章于 2024-07-12 17:23:15 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS创建倒梯形的简洁方法。通过设置特定的边框和透明度，仅用几行代码就能轻松实现倒梯形的显示效果。

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

CSS实现一个倒梯形，也非常的简单哦，就几行代码就可以搞定了，记录一下，代码仅供参考。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>

		<style>
			.box {
				border-top: 40px solid blue;
				border-left: 25px solid transparent;
				border-right: 25px solid transparent;
				height: 0;
				width: 100px;
			}
		</style>
	</head>

	<body>
		<div class="box">

		</div>

	</body>

</html>

效果如下