CSS透明长长的影子(CSS Transparent Long Shadows)

所以我与创建长长的影子，但在纹理背景任务。其他的在线教程都怎么了坚实的背景，看起来纹理或图像的背景非常可怕的做到这一点。

我非常接近它，尝试一些不同的技术，但是我来到了两种可能性，每一个问题，因此，如果任何人都可以帮我调试它要么将不胜感激。这些都不是跨浏览器，我只是想弄清楚最低限度，如果它是可行的，所以请忽略缺少前缀等

类型1：纯CSS使用CSS中的倾斜的选择，我能够在左侧和底部的渐变添加两个街区。然后，每个倾斜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/

你可以尝试添加边框渐变填补了国内空白。

从这个链接想出来： 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/但无法得到着色正确的-想我可以留给你。