0

I have the following grid layout.

<div class="container">
  <i class="far fa-circle left"></i>  <!--left col-->
  <i class="fas fa-long-arrow-alt-right arrow"></i>  <!--mid col-->
  <i class="fas fa-circle right"></i>  <!--right col-->
</div>

In all 3 columns I show icons. I want to scale up the icon, in the middle, only on x-axis, without distortion. I have tried to apply transform: scale(x,y) from this answer as shown below.

.container {
  width: 10em;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
}

.arrow {
  justify-self: center;
  font-size: 250%;
  transform: scale(2, 1); /*<-- scaling*/
}

.left {
  font-size: 250%;
  justify-self: end;
}

.right {
  font-size: 250%;
  justify-self: start;
}

However, it distorts the icon as can be seen below.

enter image description here

Link to codepen.

Is there any CSS-based solution for this? Alternatively, a solution is also welcomed that stretches the icon, such that it fills up the x-axis of the middle column. Actually, that is even better :)

Sayan Pal
  • 4,768
  • 5
  • 43
  • 82

0 Answers0