CSS Transparent Long Shadows

问题:

So I was tasked with creating long shadows but on a textured background. The other tutorials online are all how to do it with a solid background which looks pretty terrible on textures or images for backgrounds.

I got pretty close with it, trying a few different techniques but I came down to two possibilities, each with problems, so if anyone can help me debug either it would be greatly appreciated. These are not cross browser, I am just trying to figure out bare minimum if it is doable so please ignore lack of prefixes etc.

Type 1: Pure CSS Using the Skew option in CSS I was able to add two blocks on the left and bottom with a gradient. Then skewing each 45 degrees I get close to the desired effect but there is a line in between where the shadows don't perfectly meet that i can't get to go away without overlap: 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%);
}

Type 2: Javascript With rotational math figured out, I was able to rotate a gradient box to make a perfect shadow. The problem is if the size of the box changes, the angle of the shadow changes and that doesn't work for what I am trying to do. I would like it to work universally. I included a textarea on this one when I was figuring out the math: http://jsfiddle.net/mfeola/tpdhLqs1/

回答1:

You could try adding a border gradient to fill the gap.

Was trying it out from this link: https://css-tricks.com/examples/GradientBorder/

Couldn't get the exact colors right, but I think you should be able to do this using some border gradient formatting as follows:

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

Was messing around with it a bit here: http://jsfiddle.net/4bfrkagu/13/ but couldn't get the coloring right - figured I could leave that to you.