Can I create this shape with CSS only?

Question

I'm building a hero section for a webpage that has a particular shape, at the moment I'm just using an image as an overlay for the actual section background, but I'm looking to reduce the amount of requests I make and would like to know if the following shape can be done using CSS:

So the black part is where the actual image goes, while the white section is what I'm trying to build using CSS;

i wanted to possibly give you a start, <p id="rcorners1">Rounded corners!</p> #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } also this may help - css-tricks.com/books/volume-i/make-heart-shape — aaron lilly
– aaron lilly, Commented Jun 12, 2019 at 15:21
Can I get a suggestion on what to look into? I'm searching for rounded corners or gradients, but I'm not sure what would be the best approach, using a bunch of absolute divs to build the shape doesn't sound right — IvanS95
– IvanS95, Commented Jun 12, 2019 at 15:22

Temani Afif · Accepted Answer · 2019-06-12 19:55:40Z

6

Here is an idea with one element and radial-gradient to approximate it

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

<div class="box">

</div>

You can then adjust left/right/bottom properties to control the overal shape by having some oveflow and overlap:

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:-2px;
  right:40%;
  bottom:-45%;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:-2px;
  left:40%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

<div class="box">

</div>

Here is an idea using SVG to replace the radial-gradient:

.box {
  height: 200px;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path fill="white" d="M64 64 C56 30 8 48 0 0 L0 64 Z"/></svg>');
  background-size:100% 100%;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

<div class="box">

</div>

Here is a good online tool to edit the SVG: http://jxnblk.com/paths/. Simply append the path to the url at the end and edit it;

http://jxnblk.com/paths/?d=M64 64 C56 30 8 48 0 0 L0 64 Z

edited Jun 12, 2019 at 19:55

answered Jun 12, 2019 at 15:43

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IvanS95 Over a year ago

@JacqueGoupil I'll try building the SVG to do it like that, but this is impressive really, will see which one is better for me

Temani Afif Over a year ago

@dgknca change the coloration of the gradients (even the transparent) and you will clearly indentify the trick ;)

IvanS95 Over a year ago

One thing that I notice, which I suppose an SVG would be a bit better for, is the 'border' of the gradients right? since using 100% for the white section won't create a good-looking curve

Temani Afif Over a year ago

@IvanS95 yes, this won't be perfect but you can always adjust the different value to make it better .. instead of the 99%, you can for example use 99.5%. I will also add my SVG version later ;)

Collectives™ on Stack Overflow

Can I create this shape with CSS only?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related