2

I have 2 div elements: a parent and its child, and need to have rounded corners on both of them. Setting border-radius to for example 20px usually does that, but once I add transform property to child specifically scaleX, border-radius becomes smaller and visually doesn't change even if I set its value to higher, here is the sample code:

.container {
  background-color: grey;
  height: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.item {
  background-color: red;
  transform-origin: 0 50%;
  transform: scaleX(0.5);
  border-radius: 20px;
  height: inherit;
}
<div class="container">
  <div class="item"></div>
</div>

and here's the codesandbox link of the following code: https://codesandbox.io/s/silent-worker-nt7i0v?file=/src/styles.css

and the image of the behavior: Note how border radius of the child looks different than that of the parent, even though they have the same value set for it.

enter image description here

AStombaugh
  • 2,930
  • 5
  • 13
  • 31
Ivditi Gabeskiria
  • 302
  • 1
  • 2
  • 9
  • 1
    don't use transform in this case, consider width (width:50% ) – Temani Afif Jun 23 '22 at 21:15
  • 1
    yeah I'm using width for now, but was going to use transform and translate for animations, like the progress bar getting filled not sure if i can achieve that with just width? – Ivditi Gabeskiria Jun 23 '22 at 21:21
  • 1
    You absolutely can do this sort of animation with just width. The scale transform is going to stretch the image. It wouldn't be possible to maintain the aspect ratio... at least not without also impacting the height at the same time (which does not appear to be your desire). – John Green Jun 23 '22 at 21:43

4 Answers4

1

You can definitely use width here, and you can definitely animate it too. Here's a quick example:

.container {
  background-color: grey;
  height: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.item {
  background-color: red;
  width: 0%;
  border-radius: 20px;
  height: inherit;
  animation: fill 5s infinite;
}

@keyframes fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
<div class="container">
  <div class="item"></div>
</div>
AStombaugh
  • 2,930
  • 5
  • 13
  • 31
0

I believe the transform X is "squishing" the .item, and that's what you're seeing here. As an alternative, can you use width: 50% instead of transform: scaleX(0.5)? That will maintain the proper radius on .item

Tim Lowrimore
  • 2,024
  • 1
  • 17
  • 9
0

scaleX is squishing the .item div, if you would like to use transform especially you can fix like that but using animation or width could be better.

.item {
  background-color: red;
  transform: translateX(-50%);
  border-radius: 20px;
  height:inherit;
}
erayatess
  • 1
  • 1
-1

I think your code so complicated.

You can use simply width instead transform, transform-origin.

Just set simply like this.

.item {
  background-color: red;
  width: 50%;
  border-radius: 20px;
  height: inherit;
}
yeshealer
  • 93
  • 1
  • 2
  • 8