如何用 HTML 和 CSS 创建一个可交互的圆盘式环形图？

打造圆盘式环形图

本文将探究如何利用 html 和 css 实现一个可交互的圆盘，在点击后展开为一个更大的六等分圆盘，每个部分都可触发特定事件。

实现方法

使用 CSS 中的 transform 属性是实现这一效果的最佳选择。transform 提供了旋转 (rotate) 和倾斜 (skew) 功能，可创建复杂的几何形状。

以下是实现步骤：

立即学习“前端免费学习笔记（深入）”；

1. 创建圆盘基底：使用 border-radius 属性创建边框半径为 50% 的圆形。
2. 旋转圆盘：利用 transform: rotate(45deg); 旋转圆盘 45 度角。
3. 创建圆盘部分：使用六个 div 创建圆盘的不同部分，并使用 transform: skew() 进行倾斜，创建六等分效果。
4. 添加点击事件：为每个圆盘部分添加クリック事件监听器，以响应用户交互并触发所需操作。

为了便于理解，您可以在 CodePen Demo 中查看示例代码：

[示例代码]

效果展示

点击圆盘的中央部分时，它会展开为一个更大的六等分圆盘，每个部分都可以单独点击以触发不同的事件。