html - CSS 使 div 在顶部和底部 flex 但在左侧和右侧笔直

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

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