How to make a snowboard (or squeezed rectangle) shaped div in css?

Question

I am trying to get this shape: So far I have this. Is there a way to get this effect using CSS? I thought a negative radius would probably work.

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

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.

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>