CSS使div在顶部和底部弯曲，但在左侧和右侧笔直

Question

嘿伙计们我一直想知道是否有可能做到这一点，我已经尝试了border-radius，但它只显示了左右两侧的曲线......

这就是我的需要：

这将是有效的div：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何可能的想法？

Answer 1

一些可能的想法：

• 您可以尝试使用 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的边界。

我知道这不是一个完整的答案，但我希望它有所帮助:)）

Answer 2

这样的事情可以实现，但它很麻烦。 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>