CSS 透明长阴影

Question

所以我的任务是在带纹理的背景上创建长阴影。网上的其他教程都是如何用纯色背景做的，纯色背景在纹理或背景图像上看起来很糟糕。

我已经非常接近它了，尝试了几种不同的技术，但我归结为两种可能性，每种可能性都有问题，所以如果有人能帮助我调试其中任何一种，我将不胜感激。这些不是跨浏览器的，我只是想弄清楚是否可行所以请忽略缺少前缀等。

类型 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 通过计算旋转数学，我能够旋转渐变框来制作完美的阴影。问题是如果盒子的大小发生变化，阴影的角度也会发生变化，这对我想要做的事情不起作用。我希望它普遍适用。当我计算数学时，我在这个上面包含了一个文本区域： http://jsfiddle.net/mfeola/tpdhLqs1/

Answer 1

您可以尝试添加边框渐变来填充空白。

正在尝试从这个 link: 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/ 但无法正确着色 - 我想我可以把它留给你。

CSS 透明长阴影

CSS Transparent Long Shadows

html

css

jquery

dropshadow