主页 / 问题 / 1181751
Accepted
maks-maks157
Asked:2020-09-24 05:32:38 +0800 CST2020-09-24 05:32:38 +0800 CST

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. Best Answer

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

    仅限 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

相关问题