用html + css 写一个不规则矩形

日期: 2026-10-23

标签: 母婴育儿

以下是一个简单的不规则矩形示例：

<!DOCTYPE html>
<html>
<head>
	<title>不规则矩形</title>
	<style>
		.shape {
			width: 0;
			height: 0;
			border-top: 60px solid #f00;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
		}
	</style>
</head>
<body>
	<div class="shape"></div>
</body>
</html>

解释：

这个不规则矩形是通过 CSS 的 border 属性来实现的。它的上边框是一个红色的实心线条，高度为 60 像素；左右两边的边框都是透明的，宽度为 100 像素。因为左右两边的边框都是透明的，所以这个矩形的左右两侧会出现“截断”的效果。这个矩形的宽度和高度都是 0，因为这个元素只是用来展示形状，而没有实际的内容。

原文地址: http://www.cveoy.top/t/topic/bGrP 著作权归作者所有。请勿转载和采集!