如何在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变大或变小以获得所需尺寸（更改宽度和高度）。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>Board</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如我在评论中所说，你需要从板的顶部和底部切掉一些木头。 @Ruddy的董事会看起来好多了。

我使用了那些超高半径值，因为它们在板和滑雪板上的实际测量方式。使用滑雪板规格，您实际上可以实现相同的外观/形状。

关于纯CSS的问题（当然是调整数字）。

但是如果你需要它是一个半透明的物体放在（彩色）背景上，这样你就不能使用白色橡皮擦，你最好使用HTML画布和一个简单的JS。

＆＃13;

＆＃13;

div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    min-width: 200px;
    border-radius:10% / 70%;
    background-color: red;
}
div:before, div:after {
  content: "";
  background-color: white;
  width: 800px;
  height: 800px;
  display: block;
  border-radius: 800px;
  position: absolute;
  }
div:before {
  margin: -804px 0 0 -307px;
}
div:after {
  margin: 4px 0 0 -307px;
}

＆＃13;

<div>
    Board
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

#a{position:relative;height:50px;width:100px;background-color:green;border-radius:50%;}
#b{position:relative;top:-48px;left:50px;height:46px;width:100px;background-color:green;}
#c{position:relative;top:-96px;left:100px;height:50px;width:100px;background-color:green;border-radius:50%;}

＆＃13;

<div id="a"></div><div id="b"></div><div id="c"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

那样的东西？

#board-cont{
    position: relative;
    overflow: hidden;
}
#board-cont .board{
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    width: 190px;
    height: 30px;
    border-radius:15% / 70%;
    background-color: red;
}
#board-cont .border-top{
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border-top: 3.4482758620689653px solid #ffffff;
    border-bottom: 3.4482758620689653px solid #ffffff;
    border-left: 100px solid #ffffff;
    border-right: 100px solid #ffffff;
    border-radius: 100px / 3.4482758620689653px;
    left: 0px;
    top: -4px;
}
#board-cont .border-bottom{
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border-top: 3.4482758620689653px solid #ffffff;
    border-bottom: 3.4482758620689653px solid #ffffff;
    border-left: 100px solid #ffffff;
    border-right: 100px solid #ffffff;
    border-radius: 100px / 3.4482758620689653px;
    left: 0px;
    bottom: 0px;
}

<div id="board-cont">
    <div class="border-top"></div>
    <div class="border-bottom"></div>
    <div class="board"></div>
</div>

Answer 5

在CSS中实现这一过程将是一个漫长的过程。您可以改用SVG：

＆＃13;

＆＃13;

<svg height="150" width="500">
<ellipse style="fill:lime" ry="50" rx="109" cy="49" cx="220" />
<ellipse style="fill:white" ry="73" rx="270" cy="-51" cx="214" />
<ellipse style="fill:white" ry="73" rx="270" cy="151" cx="214" />
</svg> 

＆＃13;

＆＃13;

＆＃13;