RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1181751
Accepted
maks-maks157
maks-maks157
Asked:2020-09-24 05:32:38 +0000 UTC2020-09-24 05:32:38 +0000 UTC 2020-09-24 05:32:38 +0000 UTC

HTML 和 CSS 中的圆圈

  • 772

有必要不断地制作HTML这样CSS的圆圈。有一个代码已经完成,但是使用它是不可能在选定的一个上画一个圆圈并做出正确的阴影。

在此处输入图像描述

section {
    width: 12em;
    margin: auto;
}

.chart {
    position: relative;
    overflow: hidden;
    /* .triangle выходят за пределы */
}

.center {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: 36px;
    top: 36px;
    background-color: #FFF;
    z-index: 2;
}

.chart:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.triangle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50%;
    transform-origin: center bottom;
    overflow: hidden;
}

.circle {
    height: 100%;
    width: 100%;
    background: silver;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform-origin: center bottom;
    transform: rotate(156.5deg);
}
<section class="chart">
   <div class="center"></div>
   <div class="triangle" style="transform:rotate(   0deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate( 22.5deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate(45deg)">
      <div class="circle" style="background:#FA3F3C"></div>
   </div>
   <div class="triangle" style="transform:rotate(67.5deg)">
      <div class="circle" style="background:#FFFC3E"></div>
   </div>
   <div class="triangle" style="transform:rotate(90deg)">
      <div class="circle" style="background:#BCBE00"></div>
   </div>
   <div class="triangle" style="transform:rotate(112.5deg)">
      <div class="circle" style="background:#02C103"></div>
   </div>
   <div class="triangle" style="transform:rotate(135deg)">
      <div class="circle" style="background:#44FA42"></div>
   </div>
   <div class="triangle" style="transform:rotate(157.5deg)">
      <div class="circle" style="background:#3AFEFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(180deg)">
      <div class="circle" style="background:#02BCBD"></div>
   </div>
   <div class="triangle" style="transform:rotate(202.5deg)">
      <div class="circle" style="background:#0301BF"></div>
   </div>
   <div class="triangle" style="transform:rotate(225deg)">
      <div class="circle" style="background:#3D3FF9"></div>
   </div>
   <div class="triangle" style="transform:rotate(247.5deg)">
      <div class="circle" style="background:#FE40FD"></div>
   </div>
   <div class="triangle" style="transform:rotate(270deg)">
      <div class="circle" style="background:#BC02C0;"></div>
   </div>
   <div class="triangle" style="transform:rotate(292.5deg)">
      <div class="circle" style="background:#FFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(315deg)">
      <div class="circle" style="background:#BDBCBF"></div>
   </div>
   <div class="triangle" style="transform:rotate(337.5deg)">
      <div class="circle" style="background:#3F3F3F"></div>
   </div>
   <div class="triangle" style="transform:rotate(360deg); z-index: 2">
      <div class="circle" style="background:#020202"></div>
   </div>
</section>

html
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    UModeL
    2020-09-24T19:06:06Z2020-09-24T19:06:06Z

    我不知道这个设计有多重要……我用一个切口代替了箭头——它看起来并没有太大的不同,但代码大小却大大减少了。

    仅限 HTML 和 CSS(CSS 变量、圆锥和径向渐变、drop-shadow()):

    let oRainbow = document.querySelector("div.rainbow");
    let oMarker = document.querySelector("div.marker");
    oRainbow.addEventListener("click", function(ev) {
      oMarker.style.setProperty("--deg", Math.floor(((180 / Math.PI) * Math.atan2(ev.offsetY - this.offsetHeight / 2, ev.offsetX - this.offsetWidth / 2)) / 22.5) * 22.5 + 90);
    });
    body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-image: radial-gradient(#faf, #000); overflow: hidden; }
    
    .chart {
      position: relative;
      height: 12em; width: 12em;
    }
    
    .rainbow {
      height: 100%; width: 100%;
      border-radius: 50%;
      background-image: conic-gradient( #fff 0deg, #fff 22deg, #bdbcbf 22.5deg, #bdbcbf 44.5deg, #3f3f3f 45deg, #3f3f3f 67deg, #020202 67.5deg, #020202 89.5deg, #bd0204 90deg, #bd0204 112deg, #fa3f3c 112.5deg, #fa3f3c 134.5deg, #fffc3e 135deg, #fffc3e 157deg, #bcbe00 157.5deg, #bcbe00 179.5deg, #02c103 180deg, #02c103 202deg, #44fa42 202.5deg, #44fa42 224.5deg, #3afeff 225deg, #3afeff 247deg, #02bcbd 247.5deg, #02bcbd 269.5deg, #0301bf 270deg, #0301bf 292deg, #3d3ff9 292.5deg, #3d3ff9 314.5deg, #fe40fd 315deg, #fe40fd 337deg, #bc02c0 337.5deg, #bc02c0 360deg);
      box-shadow: inset 0 -2px 5px #000a;
    }
    
    .marker {
      --deg: 0;
      position: absolute;
      top: 50%; left: 50%;
      z-index: 1;
      height: 120px; width: 120px;
      border-radius: 50%;
      transform-origin: center;
      transform: translate(-50%,-50%) rotateZ(calc(var(--deg) * 1deg));
      background-image: conic-gradient( #fff0 0deg, #fff0 22deg, #fff 23deg);
      filter: drop-shadow(0 0px 3px rgba(0, 0, 0, 0.7));
      transition: .6s ease-in-out;
    }
    .marker::after {
      content: "";
      position: absolute;
      top: -35px; left: 57px;
      z-index: 1;
      height: 35px; width: 35px;
      border-radius: 50%;
      transform: rotateZ(calc(var(--deg) * -1deg));
      background-image: radial-gradient( circle, #fff 8px, #0000 10px, #0000 12px, #fff 14px, #fff 16px, transparent 17px);
      filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.9));
      transition: .6s ease-in-out;
    }
    <section class="chart">
      <div class="rainbow"></div>
      <div class="marker"></div>
    </section>

    JS 仅用于交互。

    • 6

相关问题

  • 具有非均匀背景的块内的渐变边框

  • 离开页脚

  • 如何将三个字段的数据收集到一封电子邮件中?

  • Html 元素刚从父元素中出来

  • 如何在css中制作这个背景?

  • 如何制作带有斜条纹的背景?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5