线性渐变对角阴影

Question

I am attempting to add a shadow to the diagonally cut section of the div. Please see code below. Unfortunately, I am unable to do so, and can only get a box-shadow around the whole div. How can I target the diagonal section? Where the left hand side div meets Hulk Hogan, I want to include a shadow here. I hope this makes sense.

See jsfiddle here

 .left-box { float: left; height: 361px; width: 68%; color: white; z-index: 1; } .right-box { right: 0; height: 361px; width: 55%; color: white; position: absolute; background: url("http://img.bleacherreport.net/img/images/photos/002/796/309/8288d50f6769ccb555f2b9010a4f6544_crop_north.jpg?w=543&h=361&q=75"); background-repeat: no-repeat; } .gradient{ position: relative; } .gradient.right { background: linear-gradient(to top left, transparent 50%, yellow 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, yellow 0.1%) no-repeat; background-size: 41% 122%, 60% 100%; background-position: 100% 0%, 0% 0%; box-shadow: red 0 0 50px; } .gradient h3{ position: absolute; font-size: 40px; left: 5px; top: 5%; width: 50%; } .gradient p { position: absolute; left: 5px; top: 25%; width: 50%; font-size: 18px; } 

 <div class="gradient right left-box"> </div> <div class="right-box box"> </div> 

Answer 1

One option is to try to include it into the gradient:

.gradient.right {
  background: linear-gradient(to top left, transparent 50%,
    rgba(255, 0, 0, 0) 50%, rgba(255, 0, 0, 1) 53%, yellow 53.5%) no-repeat,
    linear-gradient(to top left, transparent 0.1%, yellow 0.1%) no-repeat;
  background-size: 41% 122%, 60% 100%;
  background-position: 100% 0%, 0% 0%;
}

With the rgba(255, 0, 0, 0) 50%, rgba(255, 0, 0, 1) 53% you can specify the color of the shadow (they should be the same values for R, G and B).

The result looks like this:

Here's the updated JSFiddle .

I have chosen a 0.5% increment (from 53% to 53.5% ) for the gradient from the red shadow to the yellow background so that the edge looks a bit smoother. You can also calculate the values with the CSS3 calc function for more control.