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

I am trying to get this shape: 如何在css中制作滑雪板（或挤压矩形）形状的div？ So far I have this. Is there a way to get this effect using CSS? I thought a negative radius would probably work.

我试图得到这样的形状：到目前为止我有这个。有没有办法使用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>

5 个解决方案

#1

I like stuff like this as I always mess around to create things like this. So here is how I would do it. Using :before and :after we can create this shape, we use them to create a shape to sit on top of the div with the same colour as the background. This will make it look like the shape you want.

我喜欢这样的东西，因为我总是乱搞这样的东西。所以我会这样做。使用：before和：在我们可以创建这个形状之后，我们使用它们创建一个坐在div顶部的形状，颜色与背景相同。这将使它看起来像你想要的形状。

Make the :before and :after big and smaller to get the size you want (change the width and height).

制作：之前和之后：大小之后得到你想要的尺寸（改变宽度和高度）。

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>

#2

As I said in the comment, you need to chop off some wood from the top and the bottom of the board. @Ruddy's board looks much better though.

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

I used those super-high radius values because of the way they're actualy measured on boards and skis. Using snowboard specs , you could actually achieve the identical look/shape.

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

That's about as far as you can get with plain CSS (with tweaking the numbers, of course).

这就是你可以用普通的CSS（当然是调整数字）。

But if you need it to be a semi-transparent object to be put over a (colorful) background so that you can't use the white eraser, you'd be better off using a HTML canvas and a simple JS.

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

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

<div>
    Board
</div>

#3

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

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

#4

Something like that?

那样的东西？

#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>

#5

Achieving this in CSS would be a lengthy process. You could use an SVG instead:

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

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

#1