이미지를 사용하지 않고 그림자 테두리가있는 곡선 된 머리글을 구현하는 방법

Question

아래 코드 예제에서 볼 수있는 것처럼 머리글을 작성하려고합니다. 이 예제에서는 3 가지 배경 이미지를 사용하고 있습니다. 하지만 고해상도 디스플레이가있는 모바일 장치에서는보기 흉하게 들리기 때문에 이미지을 사용하고 싶지 않습니다.

순수한 CSS 또는 어쩌면 벡터 기술 (SVG, 클립 또는 유사)으로 이러한 헤더를 구현할 수있는 다른 방법이 있습니까? 당신은 filter, feGaussianBlur 및 feMerge를 사용하여이 같은 의미

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

?

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

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>

희망이, 환호를하는 데 도움이됩니다.