css - 使一条边界线弯曲

Question

如何使一条边框（不是角，不是border-radius）像预览中一样弯曲？之前用过一些问题transform: rotate，但是这样是不可能把上面的部分弄圆的。目前我的 css 是border-radius: 100px 100px 0px 0px，所以顶部就像预览。但我找不到如何制作底部

标签： css

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>