如何在css中制作滑雪板(或挤压矩形)形状的div？

Question

我试图得到这个形状: 到目前为止,我有这个.有没有办法使用CSS获得此效果？我认为负半径可能会起作用.

div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    min-width: 200px;
    border-radius:10% / 70%;
    background-color: red;
}

<div>
    Board
</div>

Answer 1

我喜欢这样的东西,因为我总是乱搞这样的东西.所以这就是我要做的.使用:before和:after我们可以创建这个形状,我们使用它们来创建一个形状,坐在上面,div与背景颜色相同.这将使它看起来像你想要的形状.

使:before与:after大和小来获得你想要的大小(更改宽度和高度).

div {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  min-width: 200px;
  border-radius: 20px;
  background-color: red;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  width: 96%;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  margin: auto;
}
div:before {
  top: -17px;
  left: 0;
  right: 0;
}
div:after {
  bottom: -17px;
  left: 0;
  right: 0;
}

<div>Board</div>