使边界线弯曲

Question

如何使边框的边框（不是角落，不是border-radius ）像预览一样弯曲？在使用transform: rotate之前，有些问题，但是那样不可能使顶部变圆。目前，我的CSS是border-radius: 100px 100px 0px 0px，所以顶部就像预览一样。但我找不到底部的制作方法

Answer 1

您需要做的是将一个内部div嵌套在一个外部div内，并在内部一个div上应用不同的大小和边框-半径-但将外部div溢出-隐藏起来，这将使您拥有不同的曲线在顶部和底部-但是我同意您应该为此使用SVG的建议。

.outer {
  height: 800px;
  width: 500px;
  overflow: hidden;
  border: solid 1px black;
  border-radius: 50% 50% 0 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}


.inner {
  height: 600px;
  width: 600px;
  overflow: visible;
  border: solid 1px black;
  border-radius: 0 0 50% 50%;
  position: relative; 
  top: -58.1%;
  left: -50px
}

<div class="outer">
  <div class="inner"></div>
</div>