2

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?

RustyIngles
  • 2,433
  • 4
  • 27
  • 31
  • Also have a look at: [Wave (or shape?) with border on CSS3](http://stackoverflow.com/questions/27777470/wave-or-shape-with-border-on-css3). – Hashem Qolami Mar 30 '15 at 15:21
  • That doesn't answer this question though... – RustyIngles Mar 30 '15 at 15:22
  • The one you've referenced. It doesn't help with this question. – RustyIngles Mar 30 '15 at 15:28
  • 2
    @HashemQolami – I'd tend to agree with the asker on this one. – Josh Burgess Mar 30 '15 at 15:29
  • What about the link within my first comment? Perhaps I should have used that one. – Hashem Qolami Mar 30 '15 at 15:30
  • Still suggesting SVG as the answer, and there's a clear CSS based answer for this. – Josh Burgess Mar 30 '15 at 15:31
  • @JoshBurgess There is a CSS solution there as well. See: http://stackoverflow.com/a/27840026/1725764 – Hashem Qolami Mar 30 '15 at 15:32
  • 1
    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 Mar 30 '15 at 15:33
  • That answer uses a different HTML markup though, it's also a completely different shape – RustyIngles Mar 30 '15 at 15:37
  • This is not a duplicate question. The end result required is completely different to the question @HashemQolami has referenced – RustyIngles Mar 30 '15 at 15:51
  • @RustyIngles I reopened the question, But it is an exact duplicate of the one I posted in my first comment. Duplicate questions are welcome only if they ask the same thing in a different way. Quoted from FAQ: `We love (some) dupes. There are many ways to ask the same question, and a user might not be able to find the answer if they're asking it a different way.` – Hashem Qolami Mar 30 '15 at 15:56
  • 1
    @RustyIngles: [this might be useful...](http://jsfiddle.net/qbkmjx4s/1/) or [this](http://jsbin.com/rebini/3/edit?html,css,js,output) – jbutler483 Mar 30 '15 at 16:19

1 Answers1

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513