代码之家 › 专栏 › 技术社区 › Slim Shoaib Fazlani

怎样才能使半圆更细,宽度更小?

css html

-1

Slim Shoaib Fazlani · 技术社区 · 6 年前

我正在尝试修改一个现有的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

3 回复 | 直到 6 年前

Roope 6 年前

使戒指更薄 ,您需要增大内半圆的大小,该内半圆隐藏了外半圆的一部分,使其看起来像一个环。例如,修改 .semi-circle::before .

,您需要减小所有的宽度和高度 .mask , .semi-circle .semi-circle--mask ,和 .semi-circle--mask::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>

Cobra_Fast 6 年前

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

这个方块在中间设置了明亮的半个圆盘,所以如果你把它变大,外面的“量规”就会变薄。

Gabbax0r 6 年前

如果增大内半圆的大小,可以使半圆变薄:

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