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

通过修改

.semi-circle::before {
  ...
  width: 8.75em;
  height: 4.375em;
  margin-left: -4.375em;
  ...
}

此块在中间设置了明亮的半盘，因此，如果将其增大，则外部“仪表”将变薄。

Answer 2

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

要使整体变小，您需要减小所有.mask，.semi-circle，.semi-circle--mask和{{1} }。然后当然也要如上所述更改较小的半圆，以适应新的尺寸和所需的环厚度。

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

宽8em的仪表和较薄的环的示例：

.semi-circle::before

.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;
}

Answer 3

如果增加内部半圆的大小，则可以使半圆变薄：

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

如何使半圆变薄并且宽度更小？

3 个答案: