2

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!

mx_code
  • 2,441
  • 1
  • 12
  • 37
  • See here: https://stackoverflow.com/questions/32932143/bulge-side-of-div-cut-into-side-of-div-effect-in-css – user2740650 Mar 22 '21 at 03:53
  • I've seen that. But it's not what I want. It is actually an animation. That's why It is working. I want a static div, assuming the shape of youtube bulged playbutton. – mx_code Mar 22 '21 at 03:53
  • I know I can achieve this with sVG. But just wanted to know if there is a way to achieve this using css. – mx_code Mar 22 '21 at 03:55
  • Like this? https://stackoverflow.com/questions/14508148/rounded-side-not-rounded-corners – peteredhead Mar 22 '21 at 04:01
  • 3
    Or even better: https://css-tricks.com/the-shapes-of-css/#tv-screen-shape seems to be exactly what you're after – peteredhead Mar 22 '21 at 04:02
  • @peteredhead, I'd summarise that article here as a nice concise answer. – Jon P Mar 22 '21 at 05:09

2 Answers2

2

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>
dale landry
  • 7,831
  • 2
  • 16
  • 28
0

You can achieve this effect with a mixture of CSS clip-path and SVG filters.

First, we need to create the approximate shape using clip-path. We need enough points so that it is close to the correct shape, but it is fine for it to have sharp corners. If your clip-path knowledge is a little rusty, this article does a nice job of explaining it.

.bulged {
  display: inline-block;
  width: 150px;
  color: red;
}

.bulged::before {
  content: "";
  display: block;
  /* adjust the height */
  padding-top: 70%;
  background: currentColor;
  /* draw the shape*/
  clip-path: polygon(0 50%, 3% 20%, 8% 8%, 20% 3%, 50% 0, 80% 3%, 92% 8%, 97% 20%, 100% 50%, 97% 80%, 92% 92%, 80% 97%, 50% 100%, 20% 97%, 8% 92%, 3% 80%)
}
<div class="bulged" />

To round the sharp edges, we can use an SVG filter. To do this, we need to include an SVG in the same page as the bulged div, and inside the SVG, we will include an SVG filter. As noted in the code below, this filter works by blurring the edge of the shape and then removing the parts of the shape that are partially transparent. This makes the shape appear rounded because the edges become partially transparent when they are blurred.

.bulged {
  display: inline-block;
  width: 150px;
  color: red;
  filter: url('#round');
}

.bulged::before {
  content: "";
  display: block;
  /* adjust the height */
  padding-top: 70%;
  background: currentColor;
  /* draw the shape*/
  clip-path: polygon(0 50%, 3% 20%, 8% 8%, 20% 3%, 50% 0, 80% 3%, 92% 8%, 97% 20%, 100% 50%, 97% 80%, 92% 92%, 80% 97%, 50% 100%, 20% 97%, 8% 92%, 3% 80%)
}
<div class="bulged"></div>

<svg style="visibility: hidden;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="round">
      <!-- blur the entire shape, which makes the corners rounded -->
      <!-- increase the standard deviation to make the corners more rounded -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <!-- unblur the shape, but keep the corners rounded -->
      <!-- the color matrix increases the contrast of the alpha channel, which hides the blurry parts of the shape -->
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
    </filter>
  </defs>
</svg>

This answer was inspired by this article on CSS tricks and a related answer to a different question.

Jack Buehner
  • 83
  • 7