线性渐变对角阴影

Question

我试图在div的对角切割部分添加阴影。请参阅下面的代码。不幸的是，我无法这样做，并且只能在整个div周围获得一个盒子阴影。我如何定位对角线部分？在左手边的div遇到Hulk Hogan的地方，我想在这里加一个阴影。我希望这是有道理的。

See jsfiddle here

＆＃13;

＆＃13;

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

 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种选择是尝试将其包含在渐变中：

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

使用rgba(255, 0, 0, 0) 50%, rgba(255, 0, 0, 1) 53%，您可以指定阴影的颜色（它们应该是R，G和B的相同值）。

结果如下：

这是updated JSFiddle。

对于从红色阴影到黄色背景的渐变，我选择了0.5％的增量（从53%到53.5%），以使边缘看起来更平滑。您还可以使用CSS3 calc函数计算值以获得更多控制权。