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/，但无法得到正确的着色 - 我想我可以把它留给你。