CSS透明的長影

Question

所以我與創建長長的影子，但在紋理背景任務。網上的其他教程都是如何用堅實的背景來做到這一點，該背景對於背景紋理或圖像看起來非常糟糕。

我非常接近它，嘗試一些不同的技術，但是我來到了兩種可能性，每一個問題，因此，如果任何人都可以幫我調試它要麼將不勝感激。這些不是跨瀏覽器，我只是想找出最低限度，如果它是可行的，所以請忽略缺乏前綴等。

類型1：純CSS 在CSS中使用Skew選項我能夠添加兩個塊在左側和底部有一個漸變。然後，每個傾斜45度，我得到接近預期的效果，但有一條線在那裏之間的陰影並不完全符合，我不能去走不重疊： http://jsfiddle.net/mfeola/4bfrkagu/

.block:before, .block:after{ 
    content:"";position:absolute; display:block; 
} 

.block:before{top:0; left:100%; height:100%; width:0; padding-right:100%; 
    transform-origin: 0% 0%; 
    transform: skew(0deg, 45deg); 
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); 
} 
.block:after{top:100%; left:0; width:100%; height:0; padding-top:100%; 
    transform-origin: 0% 0%; 
    transform: skew(45deg, 0deg); 
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); 
} 

2型：Javascript 隨着旋轉數學的計算出來，我可以旋轉漸變盒做出完美的陰影。問題是如果盒子的大小發生變化，陰影的角度會發生變化，並且這對我所要做的事情不起作用。我希望它能夠普遍運作。當我計算出數學時，我在這個包括了一個textarea： http://jsfiddle.net/mfeola/tpdhLqs1/

Answer 1

您可以嘗試添加邊界漸變來填補空白。

從這個鏈接想出來：https://css-tricks.com/examples/GradientBorder/

無法得到確切的顏色正確的，但我認爲你應該能夠做到這一點使用一些邊界梯度的格式如下：

.top-to-bottom { 
    border-right: 0 !important; 
    border-left: 0 !important; 
    border-top: 0 !important; 
    border: 1px solid; 
    -webkit-border-image: 
     -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,1))) 1 100%; 
    -webkit-border-image: 
     -webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%; 
    -moz-border-image: 
     -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;  
    -o-border-image: 
     -o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%; 
    border-image: 
     linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%; 
} 

在這裏搞了一些：http://jsfiddle.net/4bfrkagu/13/，但無法得到正確的着色 - 我想我可以把它留給你。