CODEWITHSUNDEEP
htmlcsscss-shapes
RustyIngles
RustyIngles

Reputation: 2493

Wave shape border with CSS3

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?

Upvotes: 2

Views: 1335

Answers (1)

Oriol
Oriol

Reputation: 288710

You can try border-radius:

.header {
  height: 70px;
  background: #d3d3d3;
  border-radius: 5em 5em 0 0 / 13em 13em 0 0;
}
<div class="header"></div>

Upvotes: 1

Related Questions