创建圆形 div 段 [重复]答案

【问题标题】：Create circle div segment [duplicate]创建圆形 div 段 [重复]
【发布时间】：2022-01-05 18:58:53
【问题描述】：

我正在寻找一些帮助来创建这个设计See design

我需要创建这 5 个细分，但在某些情况下，我只需要 4 个细分而不是 5 个。我尝试了很多东西，但无法获得类似的结果。当用户悬停其中一个片段时，我需要添加发光效果的可能性。

到目前为止，这是我使用此 CSS 代码得到的最佳结果：

.pie__segment[data-value='72'] {
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 111.8033988% 240.2113032%);
clip-path: polygon(51% 51%,100% 56%,100% 100%,109.803399% 239.211303%);}

.pie__segment:nth-of-type(1) {
background: #1e90ff;}

.pie__segment:nth-of-type(2) {
background: #639;}

.pie__segment:nth-of-type(3) {
background: #2eec71;}

.pie__segment:nth-of-type(4) {
background: #e74c3c;}

.pie__segment:nth-of-type(5) {
background: #ffa500;}

.pie__segment {
height: 100%;
position: absolute;
width: 100%;
transform: rotate(-90deg) rotate(calc(var(--start) * 1deg));}

.pie {
height: 400px;
position: relative;
-webkit-clip-path: circle(40% at 50% 50%);
        clip-path: circle(47% at 50% 50%);
width: 400px;
background-color: black;}

.center {
width: 40%;
height: 40%;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;}

.simon-container {
width: 400px;
height: 400px;
position: relative;
box-shadow: 0px 17px 10px 0px #161616;
background-color: black;
border-radius: 100%;}

这是 HTML 代码

<div class="simon-container">
    <div class="pie" id="pie">
        <div id="blue" class="pie__segment" data-value="72" style="--start: 0"></div>
        <div id="violet" class="pie__segment" data-value="72" style="--start: 72"></div>
        <div id="green" class="pie__segment" data-value="72" style="--start: 144"></div>
        <div id="red" class="pie__segment" data-value="72" style="--start: 216"></div>
        <div id="yellow" class="pie__segment" data-value="72" style="--start: 288"></div>
    </div>
    <div class="center"></div>
</div>

这是我目前得到的结果see image

欢迎任何帮助。谢谢大家！

【问题讨论】：

要减少到 4 段，您需要重置 %s 和起始值。你试过吗？另外，请展示您在悬停时已经尝试过的内容。

标签： html css

【解决方案1】：

也许尝试用 svg 来做到这一点。

基本上，您需要使用 Illustrator 或其他可让您导出为 SVG 的程序来构建设计。

然后在文本或代码编辑器中打开 SVG 并将路径复制到您的 html 中。您可以向元素添加类并通过 css 对其进行编辑，包括悬停时的颜色变化。在路径周围添加标签，例如将段转换为链接，也应该不是问题。

【讨论】：