使用 css 或其他高性能方式的转换从圆创建 obround

Question

我正在尝试使用transform: scaleX(2)从圆创建一个长方形，但它会产生椭圆。我通过增加宽度来获得正面，但过渡在我的应用程序中变得卡顿。有没有一种高性能的方式来完成这种转换。我在这里附加了一个沙盒链接来显示行为。

https://codesandbox.io/s/suspicious-leavitt-r6tcw

Answer 1

是的，但不是单个元素，因为您需要对形状的主体(您可以将其视为矩形(和两个圆进行不同的转换。

$(document).ready(() => {
  $('button').click(() => {
    $('.shape').toggleClass('expanded');
  });
});

.shape {
  position: relative;
  margin-left: 200px;
}
.circle {
  position: absolute;
  top: 0;
  left: -12px;
  background: red;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: blue;
  transition: transform .5s;
}
.rect {
  width: 1px;
  height: 24px;
  background: blue;
  transition: transform .5s;
}
.shape.expanded .circle.left {
  transform: translateX(-32px);
}
.shape.expanded .circle.right {
  transform: translateX(32px);
}
.shape.expanded .rect {
  transform: scaleX(64);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape">
  <div class="circle left"></div>
  <div class="rect"></div>
  <div class="circle right"></div>
</div>
<button>toggle</button>