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

Question

我想得到这个形状: 到目前为止我有 this .有没有办法使用 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>