Html 如何创建这个有角度的阴影（没有图像）？

我希望减少外部依赖性，特别是尽可能用CSS效果替换图像，例如在本例中：

HTML和CSS（）如下所示

HTML

CSS

#一个{
宽度：940px；
高度：350px；
填充：0 10px；
利润率：10px0；
位置：相对位置；
}
#一个{
背景图像：url（“http://webhost.ischool.uw.edu/~joatwood/portfolio/images/slider shadow.png”）；
}
#一个>分区{
背景颜色：紫色；
宽度：100%；
身高：100%；
}

我希望实现以下三点：

斜阴影仅在元素的左右边缘上消失（不能隐藏溢出，否则，此元素中的其他伪元素必须延伸到其边缘之外）

阴影应该从黑色逐渐变为白色，因为它在垂直方向上离中间较远

阴影不应该使用直边-它应该有点模糊，就像应用

框阴影：5px 5px 5px

---

到目前为止，我已经尝试了两种方法，但都没有完全成功：

使用渐变背景-它在#1和#2完全成功，但我想不出用它实现#3的方法

并尝试应用一些长方体阴影来模拟模糊度-此尝试仅在#3时成功，就#1和#2而言，根本不起作用

我可以使用CSS3，只要它能在当前主流浏览器（Firefox、Chrome）中工作，但是我不能将任何伪元素应用到内部

，因为它们被用于页面上的另一个设计元素。

<style type="text/css">
#container {
    width: 350px;
    height: 250px;
    position: relative;
}
#box {
    height: 100%;
    width: 100%;
    background-color: #909;
    position: absolute;
}
.shadow {
    width: 10px;
    height: 50%;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    z-index: -1;
}
#TL {
    transform:rotate(-2deg);
    -ms-transform:rotate(-2deg); /* IE 9 */
    -webkit-transform:rotate(-2deg); /* Safari and Chrome */
    left: -3px;
}
#TR {
    transform:rotate(2deg);
    -ms-transform:rotate(2deg); /* IE 9 */
    -webkit-transform:rotate(2deg); /* Safari and Chrome */
    right: -3px;
}
#BR {
    transform:rotate(178deg);
    -ms-transform:rotate(178deg); /* IE 9 */
    -webkit-transform:rotate(178deg); /* Safari and Chrome */
    right: -3px;
    bottom: 0px;
}
#BL {
    transform:rotate(182deg);
    -ms-transform:rotate(182deg); /* IE 9 */
    -webkit-transform:rotate(182deg); /* Safari and Chrome */
    left: -3px;
    bottom: 0px;
}
</style>

<div id="container">
    <div id="box"></div>
    <div class="shadow" id="TL"></div>
    <div class="shadow" id="TR"></div>
    <div class="shadow" id="BR"></div>
    <div class="shadow" id="BL"></div>
</div>

#容器{
宽度：350px；
高度：250px；
位置：相对位置；
}
#盒子{
身高：100%；
宽度：100%；
背景色：#909；
位置：绝对位置；
}
.影子{
宽度：10px；
身高：50%；
位置：绝对位置；
背景：-moz线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.9）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（0,0,0,0））、颜色停止（100%，rgba（0,0,0,0.9））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.9）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.9）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.9）100%）；/*IE10+*/
背景：线性梯度（至底部，rgba（0,0,0,0）0%，rgba（0,0,0,0.9）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00000000'，endColorstr='#e600000'，GradientType=0）；/*IE6-9*/
z指数：-1；
}
#热释光{
变换：旋转（-2deg）；
-ms变换：旋转（-2deg）；/*IE 9*/
-webkit变换：旋转（-2deg）；/*Safari和Chrome*/
左：-3px；
}
#TR{
变换：旋转（2deg）；
-ms变换：旋转（2deg）；/*IE 9*/
-webkit变换：旋转（2deg）；/*Safari和Chrome*/
右：-3px；
}
#溴{
变换：旋转（178度）；
-ms变换：旋转（178度）；/*IE 9*/
-webkit变换：旋转（178度）；/*Safari和Chrome*/
右：-3px；
底部：0px；
}
#基本法{
变换：旋转（182度）；
-ms变换：旋转（182度）；/*IE 9*/
-webkit变换：旋转（182度）；/*Safari和Chrome*/
左：-3px；
底部：0px；
}

我不打算解释太多，因为你已经知道它是如何工作的了。对于那些没有的，基本上，我在父对象上添加了一个

线性渐变。然后我将CSS三角形（通过
:before
/
:before
:after

添加）覆盖在每一侧，以获得所需的外观

-看起来很像我

它将在所有主要浏览器中工作。虽然它在铬合金上看起来更好，因为FF在三角形上生成锯齿状的边

HTML

<div id="two">
  <div></div>
</div>

---

让我知道你的想法-据我所知，他们看起来是一样的。渐变可以稍微调整一下，使它们完全相同

添加一个

框阴影

，并通过

：before

/

：after

？@JoshC>覆盖三角形以遮罩它？除了剪裁看起来很奇怪的

框阴影

（奇怪的深黑色线条），我不能限制

框阴影

垂直延伸，也不能使阴影更暗/更亮，因为它垂直靠近容器的中间。是的，这看起来不太好。。不过我发现了一篇有趣的文章。我没有意识到您可以有多行

box shadow

@乔希，嗯，可能有用。如果以后没人能弄明白，我会再尝试一下，记住一些例子。这看起来很像，但它不使用伪元素。。。此方法是否允许像

背景图像

示例中那样模糊阴影？这与我提供的

transform:skew

示例非常相似（虽然它似乎在webkit浏览器中不起作用），但与之类似，它缺少阴影/模糊效果。（提醒我，我现在要在问题中澄清）@Nightfirecat My bad-没有看到我使用Chrome的原因。。我想知道如何使用

filter:blur（5px）不影响子元素。请看@Nightfirecat，这是一个非常粗俗的网站，但是请看这个。。注意-它目前只适用于Chrome，因为
blur
在FF中似乎不起作用。。
#two {
    width: 940px;
    height: 350px;
    padding: 0;
    margin-left: 10px;
    position: relative;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 2%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 98%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
}

#two > div {
    background-color: purple;
    width: 920px;
    height: 100%;
    margin: 0px auto;
}

#two:before, #two:after {
    content: "";
    width: 10px;
    height: 0px;
    border-top: 175px solid transparent;
    border-bottom: 175px solid transparent;
    position: absolute;
    top: 0;
}

#two:before {
    left: 0px;
    border-left: 10px solid white;
}

#two:after {
    right: 0px;
    border-right: 10px solid white;
}