html - CSS 条纹阴影

Question

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

我看不出有任何方式可以完全按照设计干净地执行此操作（尽管我可以想到一些让这件事变得容易的折衷方案），但我想在请求重新设计之前仔细检查。

编辑：这是迄今为止我所拥有的代码笔：http://codepen.io/anon/pen/rCkto如果
有人对改进方法有任何想法，我仍然愿意接受改进建议，或者即使是完全不同的方式来做到这一点。

Answer 1

我做了一个例子。

例子

仅使用 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

基本上，我有一个 page-title 和一个 page-title-wrapper，每个都有一个向下移动的 :after 伪元素。:after 伪元素有一个平铺的条纹背景图像，以及一个插入的白色框阴影来近似边缘处的褪色。

它并不完美——例如，似乎有一些与标题元素的边框半径相关的小瑕疵——但它很灵活，它是纯 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

更好的小提琴

CSS3 渐变

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

基本元素的边界半径设置为右侧。

有一个显示剥离图案的伪元素。

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

演示