html - 如何在不使用图像的情况下实现带阴影边框的 flex 标题

Question

我正在尝试构建一个 header ，就像您在下面的代码示例中看到的那样。在此示例中，我使用了 3 个不同的背景图像。 但我不想使用图片，因为它们在具有高分辨率显示器的移动设备上变得丑陋。

是否有其他可能性可以使用纯 CSS 或矢量技术(SVG、剪辑或类似技术)实现此类 header ？

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"
	 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>

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

希望这有帮助，干杯。