Question

我正在尝试实现一种需要条纹盒子阴影的设计（见下图）。显然box-shadow不支持这个，所以我想知道是否有人对另一种方法有任何建议。

我看不出任何干净利落的方式完全按照设计做到这一点（虽然我可以想到一些让这很容易做出的妥协），但我想在请求重新设计之前仔细检查。

Striped 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);
}

Answer 2

以下是我最终做的事情：http://codepen.io/anon/pen/rCkto

基本上，我有一个页面标题和一个页面标题包装器，每个都有一个：向后移位的伪元素。：伪元素后面有条纹的平铺背景图像，内嵌白色框阴影可以近似边缘的褪色。

它并不完美 - 例如，似乎有一些与标题元素的border-radius相关的微小工件 - 但它很灵活，它是纯CSS，并且它不需要任何无关的非语义标记。

Answer 3

使用图像可能是您的最佳选择，而不是css ..

Answer 4

图像将是你最好的选择，因为penweb说，但是在我不得不做的时候我努力了。

不完全是你想要的，但至少可以说这是一个有趣的挑战。

<div class="shadowMain">
<header>
    <div class="shadowTitle">
        <div class="rounded">
            <span>News & Events</span>
        </div>
    </div>
</header>

CSS有点发布，但它是小提琴。

如果您花时间调整此示例，您可能会获得该图像的质量，但我不确定是否值得付出的努力。

祝你好运！

JSFIDDLE

BETTER FIDDLE

CSS3 gradients

Answer 5

我在这里使用图片得到答案：

http://jsfiddle.net/QCFpz/

您可以使用文本，设计将进行调整。图像也是对齐的。当然，您仍然需要将样式应用于标题。

HTML：

<div id="containerTitle">
    <div id="mainTitle">
        Main Title here
    </div>
    <div id="curveTitle">
        <img src="http://i42.tinypic.com/dzvxfm.png" border="0" />
    </div>
</div>

CSS：

#mainTitle {
    background: url('http://i43.tinypic.com/1z15u7r.png') repeat-x; height:101px;
    float:left;
}

#curveTitle {
    float:left;
    height:101px;
    width:60px;
}
 #containerTitle { 
    height:101px;
    background: url('http://i41.tinypic.com/dc5z6v.png') repeat-x;
}

Answer 6

我试图在没有图像的情况下重现它，并且响应迅速。此外，不在HTML中引入额外的元素。

对于此HTML

<h1>small</h1>
<br>
<h1>medium text</h1>
<br>
<h1>really the longest text</h1>
<br>
<h1 style="font-size: 60px">and bigger font</h1>

我设置了这种风格

h1 {
    display: inline-block;
    position: relative;
    background-color: white;
    border-radius: 0px 0.5em 0.5em 0px;
    padding-right: 1em;
}

h1:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -1500px;
    bottom: -50%;
    left: calc(100% - 0.5em);
    background-image: radial-gradient(1em 1em ellipse 
             at 100% 100%, white 0em, transparent 0.7em),     
        linear-gradient(0deg, white, transparent 0.7em), 
        linear-gradient(-188deg, black, transparent  0.7em);
    background-size: 0.5em 0.7em,100% 0.7em, 4em 1em;
    background-position: 2em bottom, 2.5em bottom, 0em 0em;
    background-repeat: no-repeat;
    z-index: -1;
}

h1:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1500px;
    bottom: -50%;
    left: 0%;
    background-image: repeating-linear-gradient(-45deg,white 0px, gray 20px, white 40px);
    z-index: -2;
}

基本元素的边框半径设置在右侧。

有一个伪元素显示剥离的模式。

还有另一个显示白色截止的pseduo元素（我需要2个背景形成它，1个用于弯曲的左边，另一个用于直线部分）和另一个背景用于阴影。

CSS条纹阴影

6 个答案:

demo