Jquery CSS透明长阴影

所以我的任务是在纹理背景上创建长阴影。其他在线教程都是关于如何在坚实的背景下完成这项工作，这种背景在纹理或背景图像上看起来非常糟糕

我非常接近它，尝试了几种不同的技术，但我归结为两种可能性，每种都有问题，所以如果有人能帮助我调试其中一种，我将不胜感激。这些都不是跨浏览器的，我只是想找出最低限度，如果它是可行的，所以请忽略前缀的缺乏等

类型1：纯CSS 使用CSS中的倾斜选项，我可以在左侧和底部添加两个带有渐变的块。然后每倾斜45度，我就可以接近所需的效果，但阴影之间有一条线没有完全相交，如果没有重叠，我就无法离开：

类型2：Javascript 随着旋转数学的发展，我能够旋转一个渐变框来产生一个完美的阴影。问题是，如果长方体的大小改变，阴影的角度也会改变，这对我要做的事情不起作用。我希望它能普遍适用。当我计算数学时，我在这一条上包括了一个文本区域：

---

您可以尝试添加一个边界渐变来填补空白

正在通过此链接进行尝试：

无法获得准确的颜色，但我认为您应该能够使用一些边框渐变格式来实现这一点，如下所示：

.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%;
}

---

这里有点乱：但无法正确着色-我想我可以把它留给你。

如果你将右侧阴影的宽度更改为200倍，容器的高度，线性渐变将更好地匹配对角线，我会这样做，谢谢：阴影真的排列得更好。我最后做的是，使底部阴影成为一个正方形，高度为0，顶部100%填充，得到相同的结果。事实上，现在它可以在任何高度下自动工作！非常感谢你把我引向正确的方向！我会更新这个问题似乎不起作用，现在我一直有一条黑线，而不是一条空线。哦，我想我知道发生了什么。。。这几乎就像边界一样，当背景上的两个透明背景重叠时，所以你看到的是如果你同时添加两个不透明度时的样子。-看看这个提琴，我去掉了所有的边界垃圾，只是将伪元素向下移动了1px。同样的效果。因此，我建议不要使用rgba并选择不透明度，只需选择rgb的最终颜色过渡。然后，你应该能够使用边界渐变技巧，但透明度在纹理背景上看起来不合适。我更新了小提琴，使它看起来更像我需要做的事情。我认为，如果我把透明度从一个黑暗的开始不透明降低到一个较亮的，线条将几乎不明显，所以现在应该可以了。如果我没有在颜色中使用alpha，那么无论如何，我会在那里得到一种奇怪的颜色。是的，这将是我的下一个问题——你是否需要它是透明的。但是，是的，你的现在看起来很好-如果有一行，不要真的注意到任何一行。

.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%;
}