Вращение CSS создает нежелательную границу вокруг div - PullRequest
Новая
       20

Вращение CSS создает нежелательную границу вокруг div

0 голосов
/ 20 декабря 2018

Я пытался сделать круговую диаграмму на основе трех делений.Тем не менее, вокруг div всегда есть какая-то нежелательная граница.Кроме того, они будут увеличиваться или уменьшаться при увеличении и уменьшении масштаба.

Попробуйте много способов решения других подобных вопросов.Все еще не может работать.

enter image description here

кодовая ссылка https://codepen.io/DavidLee0314/pen/PXWzYJ?editors=1100

* {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}
.pie {
  left: 40%;
  top: 30%;
  width: 174px;
  height: 174px;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  font-size: 0px;
  white-space: nowrap;
}
.pie .small-box {
  width: 100%;
  height: 100%;
}
.pie .grey {
  transform: translateX(-50%);
  background-color: #f3f5f2;
}
.pie .green {
  transform: translateX(25%);
  background-color: #222;
}
.pie .change {
  transform-origin: left center 0;
  transform: translateZ(0) scale(1, 1) translateX(50%) rotate(0deg);
  background-color: #f3f5f2;
}
<div class="pie">
  <div class="small-box green"></div>
  <div class="small-box grey"></div>
  <div class="small-box change"></div>
</div>

1 Ответ

0 голосов
/ 20 декабря 2018

просто используйте это в *:

Граница: нет: 

    * {
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0;
        padding: 0;
        border: none;
    }
    .pie{
        left: 40%;
        top: 30%;
        width: 174px;
        height: 174px;
        border-radius: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        font-size: 0;

        white-space: nowrap;
    }
    .small-box {
        width: 100%;
        height: 100%;
    }

    .grey {
        transform: translateX(-50%);
        background-color: #f3f5f2;
    }

    .green {
        transform: translateX(25%);
    }

    .change {
        transform-origin: left center 0;
        transform: translateZ(0) scale(1.0, 1.0) translateX(50%)  rotate(0deg);
        background-color: #f3f5f2;
    }
<div class="pie">
    <div class="small-box green"></div>
    <div class="small-box grey"></div>
    <div class="small-box change"></div>
</div>
...