線形グラデーション対角線

Question

divの斜めにカットされたセクションにシャドーを追加しようとしています。以下のコードをご覧ください。残念ながら、私はそうすることができず、div全体のボックスシャドーしか得られません。対角セクションをどのようにターゲットできますか？左側のdivがHulk Hoganと出会うところで、ここに影を入れたい。私はこれが理にかなってほしい。

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

1つのオプションは、勾配にそれを含めるようにしようとすることです：（rgba(255, 0, 0, 0) 50%, rgba(255, 0, 0, 1) 53%あなたは影の色を指定することができると

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

彼らR、G、Bの値は同じでなければなりません）。

結果は次のようになります。

ここupdated JSFiddleです。

赤い影から黄色の背景までの勾配に対して0.5％増分（53%から53.5%まで）を選択して、エッジが少し滑らかに見えるようにしました。さらに制御するために、CSS3 calc関数で値を計算することもできます。