html - 如何使半圆更薄且宽度更小？

Question

我正在尝试修改现有的 css 并使带有 #E9EEF2 颜色的半圆更薄且宽度更短，但没有任何运气。到目前为止，我所做的一切都是打破形状。 这是我目前所拥有的 HTML:

    .content {
      display: flex;
    }
    
    .mask {
      position: relative;
      overflow: hidden;
      display: block;
      width: 12.5em;
      height: 6.25em;
      margin: 1.25em;
    }
    
    .semi-circle {
      position: relative;
      display: block;
      width: 12.5em;
      height: 6.25em;
      background: #A148F7;
      border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
    }
    
    .semi-circle::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: 2;
      display: block;
      width: 8.75em;
      height: 4.375em;
      margin-left: -4.375em;
      background: #E9EEF2;
      border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
    }
    
    .semi-circle--mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 12.5em;
      height: 12.5em;
      background: transparent;
      transform: rotate(120deg) translate3d(0, 0, 0);
      transform-origin: center center;
      backface-visibility: hidden;
      transition: all .3s ease-in-out;
    }
    
    .semi-circle--mask::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0%;
      z-index: 2;
      display: block;
      width: 12.625em;
      height: 6.375em;
      margin: -1px 0 0 -1px;
      background: #DBDBDB;
      border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
    }
    
    .gauge--1 .semi-circle {
      background: #A148F7;
    }

<section class="content">
      <div class="box gauge--1">
        <div class="mask">
          <div class="semi-circle"></div>
          <div class="semi-circle--mask"></div>
        </div>
      </div>
    </section>

您可以在 jsfiddle 中找到它

我知道我在这里遗漏了一个很小但很重要的部分，所以请给我推一下，因为我真的不知道如何修改 CSS 为了保持当前的形状。

Answer 1

要使环变薄，您需要增加内半圆的大小，以隐藏部分外半圆，使其看起来像一个环。 IE。修改.semi-circle::before的宽度、高度和负左边距。

为了让整个东西变小，你需要减小所有.mask, .semi-circle, .semi-circle--mask，和.semi-circle--mask::before。然后当然也要像上面提到的那样更改较小的半圆以适应新的尺寸和您想要的戒指厚度。

请注意，所有高度都应为同一元素宽度的一半。 .semi-circle::before 的左边距应为同一元素宽度的负一半。

带有 8em 宽规范和稍薄环的示例:

.content {
  display: flex;
}

.mask {
  position: relative;
  overflow: hidden;
  display: block;
  width: 8em;
  height: 4em;
  margin: 1em;
}

.semi-circle {
  position: relative;
  display: block;
  width: 8em;
  height: 4em;
  background: #A148F7;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.semi-circle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: block;
  width: 6em;
  height: 3em;
  margin-left: -3em;
  background: #E9EEF2;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.semi-circle--mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: 8em;
  background: transparent;
  transform: rotate(120deg) translate3d(0, 0, 0);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: all .3s ease-in-out;
}

.semi-circle--mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 2;
  display: block;
  width: 8em;
  height: 4em;
  margin: -1px 0 0 -1px;
  background: #DBDBDB;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.gauge--1 .semi-circle {
  background: #A148F7;
}

<section class="content">
  <div class="box gauge--1">
    <div class="mask">
      <div class="semi-circle"></div>
      <div class="semi-circle--mask"></div>
    </div>
  </div>
</section>