linear gradient diagonal shadow

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>

Sebastian Simon · Accepted Answer · 2016-03-25 17:26:19Z

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.

answered Mar 25, 2016 at 17:26

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

linear gradient diagonal shadow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related