How to create a bulged div using css?

Question

How to create a bulged div using css?

Using any sort of distortion without using any svgs.!

Following is code for creating a rounded div.

But how can I add a little bit of bulge to it so that it looks like youtube play button.

.bulged {
  width: 76rem;
  height: 42rem;
  background-color: white;
  border-radius: 4rem;
}

Like this: http://clipart-library.com/clipart/6cp5BL8qi.htm

A subtle bulge is enough!

Answer 1

Use border-radius in your css. CSS-TRICKS: You can specify the radiuses in which the corner is rounded by. In other words, the rounding doesn’t have to be perfectly circular, it can be elliptical. This is done using a slash (“/”) between two values.

First uses a psuedo element :before to layer two backgrounds on top of one another, essentially giving the sense there is one element. The corners must be perfectly statically proportional to work though...

Second uses a simply border-radius creating a sort of elliptical shape.

button {
  border: none;
  outline: none;
  cursor: pointer;
}

.bulged {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 10rem;
  height: 7rem;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}

.bulged:before {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  content: 'My Button';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

.bulged:focus, .border-radius:focus{
  color: black;
}

.border-radius {
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 150px;
  border-radius: 70%/20%;
}

The button below layers two backgrounds on top of each other the regular class and its psuedo element :before
<br>
<button class="bulged">My Button</button>
The button below uses simply border-radius without any layers
<br>
<button class="border-radius">Border Radius Only</button>