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

Question

我期待降低外部依赖 - 尤其是用CSS特效替换图像尽可能，如在这种情况下：

HTML和CSS（as this fiddle shows）如下。

HTML

<div id="one"> 
    <div></div> 
</div> 

CSS

#one{ 
    width: 940px; 
    height: 350px; 
    padding: 0 10px; 
    margin: 10px 0; 
    position: relative; 
} 

#one{ 
    background-image: url("http://webhost.ischool.uw.edu/~joatwood/portfolio/images/slider-shadow.png"); 
} 

#one > div{ 
    background-color: purple; 
    width: 100%; 
    height: 100%; 
} 

我正在寻找做到的，是让这三样东西：

1. 其脱落的元素只在倾斜的阴影左边和右边（不能隐藏上溢，否则此元素内的其他伪元素必须延伸到其边缘以外）
2. 阴影应该从黑色渐变为白色，因为它是远离中间垂直
3. 影子不应该直接使用边缘 - 它应该是有点模糊，像一个影子是，如果你申请box-shadow: 5px 5px 5px

---

我已经试过两种方法，到目前为止，无论这些都完全成功：

1. I used transform: skewX on two container-sized pseudo-elements与渐变背景 - 它在完全成功＃1和＃2，但我无法想出一个方法来实现＃3。
2. I used transform: rotate on the afore-mentioned pseudo-elements并尝试应用一些盒子阴影来模拟模糊 - 这种尝试只能用＃3成功，并且根本没有工作，就＃1和＃2而言。

我很好使用CSS3，只要它在目前的主流浏览器（火狐，Chrome），但因为他们被用于我不能申请任何伪元素内<div>页面上的另一个设计元素。

Answer 1

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

Answer 2

不是真的要解释太多，因为你已经知道它是如何工作的。对于那些没有 - 基本上，我添加了一个linear-gradient背景的父母。然后我在每一面上叠加CSS三角形（通过:before/:after添加）以实现所需的外观。

jsFiddle example - 看起来和我很相似。

它将适用于所有主流浏览器。虽然它在Chrome中看起来更好看，但FF会在三角形上产生锯齿状边缘。

HTML

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

CSS

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

让我知道你在想什么 - 据我可以看到他们看起来是一样的。渐变可以调整一点，使他们相同。