Andy Tschiersch Andy Tschiersch - 1 year ago 60
CSS Question

How to realize a curved header with shadow border, without using images

I'm trying to build a header like you can see in the code example below. In this example I am using 3 different background images. But I do not want to use images, because they becomes ugly on mobile devices with high resolution displays.

Are there other possibilities to realize such header with pure CSS or maybe with vector techniques (SVG, clip or similar)?

body {
margin: 0;
#header {
height: 50px;
#header .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
#header .bg > div {
float: left;
#header .bg .left {
width: calc(25% - 59px);
height: 117px;
background-image: url("");
#header .bg .curve {
width: 59px;
height: 116px;
background-image: url("");
#header .bg .right {
width: 75%;
height: 68px;
background-image: url("");
#content {
height: 200px;
background: #cee4fa;

<div id="header">
<div class="bg">
<div class="left"></div>
<div class="curve"></div>
<div class="right"></div>
<div id="content"></div>

Answer Source

You mean something like this using filter, feGaussianBlur, and feMerge?

body {
  background: lightblue;
<svg version="1.1" id="ExampleForStackOverflow" xmlns="" xmlns:xlink="" x="0px" y="0px"
	 width="100%" height="10%" viewBox="0 0 800 400" enable-background="new 0 0 800 400" xml:space="preserve">
        <filter id="slight-glow">
            <feColorMatrix type="matrix" values=
                        "0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0.7 0"/>
            <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
<linearGradient id="SOExample1" gradientUnits="userSpaceOnUse" x1="399.5005" y1="83.313" x2="399.5005" y2="2.9984">
	<stop  offset="0" style="stop-color:#CCCCCC"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
<path filter="url(#slight-glow)" fill="url(#SOExample1)" stroke="#555555" stroke-miterlimit="10" d="M-0.5,0.5v82h158c18.625-1,23.751-16.5,28.023-24.384

CodePen to tinker with and tweak for concept refinement...

Hope this helps, cheers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download