html - CSS条纹阴影

Question

我正在尝试实现一个需要条纹框阴影的设计(见下图)。显然 box-shadow 不支持这个，所以我想知道是否有人对解决这个问题的另一种方式有任何建议。

我看不出有什么方法可以完全按照设计干净地完成此操作(尽管我可以想到一些让这变得容易的妥协)，但我想在请求重新设计之前仔细检查。

编辑:这是我目前所掌握的代码笔:http://codepen.io/anon/pen/rCkto
如果有人对此有任何改进方法的想法，我仍然乐于接受改进建议，甚至是完全不同的方法来做到这一点。

Answer 1

我举了一个例子。

EXAMPLE

仅使用 CSS(3) 可以做到这一点，但使用图像可能会更好、更容易。示例虽然仍然需要一些编辑，例如不透明度/渐变和阴影等，但它是为了展示一个示例，说明可以在不使用图像的情况下完成此操作。

HTML:

<div class="textBlock">
    <h1>News & Events</h1>
</div>
<div class="whiteBox"></div>
<div class="angled-135 stripes"></div>

CSS:

.textBlock {
    position: absolute;
    background-color: #FFFFFF;
    width: 308px;
    margin-left: -30px;
    padding-left: 54px;
    border-radius: 46px;
    margin-top: -31px;
    height: 86px;
    padding-top: 46px;
}

.whiteBox {
    position: absolute;
    width: 247px;
    height: 53px;
    margin-left: 332px;
    background-color: #FFF;
}
.stripes {
    height: 128px;
    width: 552px;
    float: left;
    margin: 10px;   
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px; /* Controls the size of the stripes */


}
.angled-135 {
    background-color: #E1E6EC;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
}