CSS 让一个 div 上下弯曲，但左右两边是直的答案

【问题标题】：CSS Make a div curved at top and bottom but straight at the left and right sidesCSS 让一个 div 上下弯曲，但左右两边是直的
【发布时间】：2017-05-15 11:15:37
【问题描述】：

嘿，伙计们，我一直想知道是否可以这样做，我已经尝试使用 border-radius，但它显然只会使左右两侧出现曲线...

这是我需要的：

这将是有效的div：

#mainbox {
  width: 115px;
  height: 24px;
  background-color: gray;
  border: 1px solid #000000;
  text-align: center;
}

<div id="mainbox">
  <div id="secondbox">test</div>
</div>

有什么可能的想法吗？

【问题讨论】：

标签： html css curve

【解决方案1】：

这样的事情是可以实现的，但是很麻烦。 SVG 会更好。

引用自this 关于 SO 的问题。

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainbox {
  width: 200px;
  height: 130px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#mainbox::before,
#mainbox::after {
  content: "";
  display: block;
  position: absolute;
  height: 100px;
  /* equal to inner curvedbox */
  border-left: 5px solid black;
  bottom: 0;
  z-index: 1;
}

#mainbox::before {
  left: 0;
}

#mainbox::after {
  right: 0;
}

#curvedbox {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#curvedbox::before,
#curvedbox::after {
  display: block;
  content: "";
  width: 140%;
  height: 200%;
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#curvedbox::before {
  top: -30%;
}

#curvedbox::after {
  top: 69%;
}

#secondbox {
  transform: translateY(-140%);
}

<div id="mainbox">
  <div id="curvedbox">
    <div id="secondbox">test</div>
  </div>
</div>

【讨论】：

您也可以将图像或背景图像剪辑成该形状吗？

【解决方案2】：

一些可能的想法：

您可以尝试使用 border-top-left-radius: 30%; border-top-right-radius: 30%;。这样做的问题是双重的：当百分比变高时，你会看到它最终也会弯曲角落（这不是你想要的），而且它也不支持倒置，所以你不会能够将其用于 div 的底部。
或者，您可以使用 clip-path 属性，如下所示：clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 这篇文章https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms 讨论了他如何使用该 css 属性来制作倾斜的 div。
查看Invert rounded corner in CSS? 中介绍的方法。重点是尝试制作一个倒圆角，许多解决方案都提供了非常有创意的方法来操纵 div 的边框。

我知道这不是一个完整的答案，但我希望它无论如何都会有所帮助:)

【讨论】：