是否可以弯曲滑块（html CSS）

Question

你好，我目前有一个光滑的滑块，看起来像这样：

是否可以实现以下目的：

我已经尝试过使用转角半径属性，但是无法获得所需的结果。 我希望中间的滑块（行星）看起来更大，其余的当到达边缘时变得更小。 我以为css转换有某种方法，但是我没有找到任何方法。 这是我当前的滑块代码：

.planets-slider {
  display: inline-block;
  width: 80%;
  margin-top: 4vh;
  margin-left: 5rem;
  border-radius: 25%!important;
}

.slick-list {
  padding: 50px 0!important;
  outline: none !important;
}

.slick-slide {
  outline: none !important;
}

.slick-center {
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  transform: scale(1.7);
  transition: all .2s ease;
}

<div class="planets-slider">
  <div><img src="images/planets/mercury.png" alt="mercury"></div>
  <div><img src="images/planets/venus.png" alt="venus"></div>
  <div><img src="images/planets/earth.png" alt="earth"></div>
  <div><img src="images/planets/mars.png" alt="mars"></div>
  <div><img src="images/planets/jupiter.png" alt="jupiter"></div>
  <div><img src="images/planets/saturn.png" alt="saturn"></div>
  <div><img src="images/planets/uranus.png" alt="uranus"></div>
  <div><img src="images/planets/neptune.png" alt="neptune"></div>
  <div><img src="images/planets/pluto.png" alt="pluto"></div>
</div>

po.setAddress(address[i]);