画像を使わずにシャドーボーダーでカーブしたヘッダーを実現するには

Question

以下のコード例のようにヘッダーを作成しようとしています。この例では、3つの異なる背景画像を使用しています。 しかし、高解像度のディスプレイを搭載したモバイルデバイスでは画像が醜いので、画像は使用しません。

純粋なCSSや多分ベクトル技術（SVG、クリップなど）でこのようなヘッダを実現する他の可能性はありますか？

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>

Answer 1

あなたはfilter、feGaussianBlur、および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" 
 
\t 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"> 
 
\t <stop offset="0" style="stop-color:#CCCCCC"/> 
 
\t <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 
 
\t c5.414-9.991,13.424-19.616,22.901-19.616H799.5v-38H-0.5z"/> 
 
</svg>

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

これは、歓声に役立ちます願っています。