How to implement a curved title with shadow, without using images

Question

I am trying to create a header, as you can see in the code example below. In this example, I use 3 different background images. But I don't want to use images because they get ugly on mobile devices with high resolution displays.

Are there any other possibilities for implementing such a header with pure CSS or maybe with vector methods (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("http://fs5.directupload.net/images/161026/hkplooah.png");
}
#header .bg .curve {
  width: 59px;
  height: 116px;
  background-image: url("http://fs5.directupload.net/images/161026/kk3zkqox.png");
}
#header .bg .right {
  width: 75%;
  height: 68px;
  background-image: url("http://fs5.directupload.net/images/161026/vaucnr84.png");
}
#content {
  height: 200px;
  background: #cee4fa;
}

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

Run codeHide result

Answer 1

Do you mean something like this using filter, feGaussianBlurand feMerge?

body {
  background: lightblue;
}

<svg version="1.1" id="ExampleForStackOverflow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="10%" viewBox="0 0 800 400" enable-background="new 0 0 800 400" xml:space="preserve">
  <defs>
        <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"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
          </feMerge>
    </filter>
  </defs>
<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"/>
</linearGradient>
<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
	c5.414-9.991,13.424-19.616,22.901-19.616H799.5v-38H-0.5z"/>
</svg>

Run codeHide result

CodePen, ...

, , .