div结合CSS的clip-path属性绘制五角星
2025/3/13
介绍了利用div元素和CSS的clip-path属性绘制五角星的方法，包含示例代码、原理及注意事项。
要用一个 div 元素绘制一个五角星，可以使用 CSS 的 clip-path 属性。clip-path 允许你定义一个裁剪区域，只有该区域内的内容才会显示出来。通过定义五角星的路径，我们可以实现这个效果。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五角星</title>
<style>
.star {
width: 100px;
height: 100px;
background-color: gold;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
解释：
.star: 这是一个div元素的类名，我们通过 CSS 来定义它的样式。width和height: 设置div的宽度和高度为 100px，形成一个正方形。background-color: 设置背景颜色为金色（gold），这是五角星的颜色。clip-path: 使用polygon函数定义五角星的形状。polygon函数接受一系列点的坐标，这些点按顺序连接形成一个多边形。在这个例子中，我们定义了 10 个点，这些点的坐标是相对于div的宽度和高度的百分比。
五角星的坐标点：
50% 0%: 顶部中心点61% 35%: 右上角的第一个点98% 35%: 右上角的第二个点68% 57%: 右下角的第一个点79% 91%: 右下角的第二个点50% 70%: 底部中心点21% 91%: 左下角的第二个点32% 57%: 左下角的第一个点2% 35%: 左上角的第二个点39% 35%: 左上角的第一个点
通过这些点的连接，clip-path 会裁剪出一个五角星的形状。
注意事项：
clip-path的兼容性较好，但在一些旧版浏览器中可能不支持。如果需要兼容性更好的方案，可以考虑使用 SVG 或者 Canvas 来绘制五角星。- 你可以通过调整
width和height来改变五角星的大小，或者通过调整clip-path中的百分比来改变五角星的形状。
这个方案简单且高效，适合在现代 Web 应用中使用。
标签：CSS
上次更新：