CSS rotation create unwanted border around divs

Question

I was trying to do the pie chart based on three divs. However, there's always some unwanted border around the divs. Also, they'll expand or shrink while zooming in and out.

Try many ways on other similar questions' solutions. Still can't work.

codepen link 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>

@davidLee do you need this shape exactlly? can I recommand you new code? — לבני מלכה, Dec 20 '18 at 13:09
you can have a look at this for another idea : https://stackoverflow.com/questions/52205399/percent-pie-chart-with-css-only/52205730#52205730 .. it's almost the same, simply remove the top gradient to have a pie — Temani Afif, Dec 20 '18 at 13:16
@ לבני מלכה Yes you can, if there're other workarounds. But I still want to solve this issue. — davidLee, Dec 20 '18 at 13:18

score 0 · Answer 1 · answered Dec 20 '18 at 13:00

just use this at *:

Border: none:

    * {
        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>

CSS rotation create unwanted border around divs

1 Answers1