CSS 制作一个 div 顶部和底部弯曲但左侧和右侧笔直

Question

大家好，我一直想知道是否可以这样做，我试过 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>

有什么想法吗？

Answer 1

一些可能的想法：

您可以尝试使用 border-top-left-radius: 30%; border-top-right-radius: 30%;。这样做的问题是双重的：你会看到当百分比变高时它最终也会弯曲角落（这不是你想要的），而且它也不支持倒置，所以你不会能够将其用于 div.
或者，您可以随意修改剪辑路径属性，如下所示：clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 这篇文章 https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms 讨论了他如何使用 css 属性制作倾斜的 divs。
看看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>

CSS 制作一个 div 顶部和底部弯曲但左侧和右侧笔直

CSS Make a div curved at top and bottom but straight at the left and right sides

html

css

curve