How to make a snowboard (or compressed rectangle) in the form of a div in css?

Question

I am trying to get this form: So far I have this . Is there any 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 things like I always messed around to create things like that. So here is how I do it. Using :before and :after , we can create this shape, we use them to create a shape that will be placed on top of the div with the same color as the background. This will make it look like the shape you want.

Make :before and :after larger 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> 

Answer 2

As I said in the commentary, you need to chop off some wood on top and bottom of the board. The @Ruddy panel looks a lot better.

I used ultra-high radii because of how they are actually measured on boards and skis. Using snowboard specifications, you can really achieve the same look / shape.

As for how much you can get simple CSS (of course, with customization of numbers).

But if you need it to be a translucent object that needs to be placed on a (colorful) background so that you cannot use the white eraser, you would be better off using HTML canvas and plain 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> 

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

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

Answer 5

Achieving this in CSS will be a lengthy process. Instead, you can use 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>