Wave shape border with CSS3

Question

I want to use CSS3 (not SVG) to be able to display a border similar to below

enter image description here

The html I need to use is:

<div class="header"></div>

with CSS the being:

.header {
    position: relative;
    height: 70px;
    width: 100%;
    background: #d3d3d3;
}

.header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0 0% 0% 100%;
    width: 3%;
    height: 70px;
    background-color: #fff;
    right: 0;
    top: 0;
}

.header:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0% 0% 100% 0%;
    width: 3%;
    height: 70px;
    background-color: #fff;
    left: 0;
    top: 0;
}

This is partway there, but not exact. I've created a JSfiddle here: http://jsfiddle.net/7fjSc/1206/

Any ideas where I'm going wrong please?

@HashemQolami – I'd tend to agree with the asker on this one. — Josh Burgess
– Josh Burgess, Commented Mar 30, 2015 at 15:29
Well, I personally wouldn't be satisfied with that as that answer leaves quite a bit to be desired if you look at the shape it's drawing off-screen. If it satisfies the user's question, though, more power to him. — Josh Burgess
– Josh Burgess, Commented Mar 30, 2015 at 15:33

Oriol · Accepted Answer · 2015-03-30 15:22:55Z

1

You can try border-radius:

.header {
  height: 70px;
  background: #d3d3d3;
  border-radius: 5em 5em 0 0 / 13em 13em 0 0;
}

<div class="header"></div>

answered Mar 30, 2015 at 15:22

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

Collectives™ on Stack Overflow

Wave shape border with CSS3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related