線形勾配の三角形のCSSカラー遷移

Question

私は、写真のように、左上から右下に2本の三角形に分割された長方形の背景に取り組んでいます。

私は何を達成したいことは、各三角形内の色の変化である：三角形ABDで

1. ：ピンクの三角形ACDで
2. 左から右に暗くなった：青は

左から右に暗くなり、

注：幅と高さは600と250に固定されていません。デモ用に使用しています。

HTMLコード：

<div class="background-wrapper"> 
    <p class="float-left">A</p> 
    <p class="float-right">B</p> 

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

    <p class="float-left">C</p> 
    <p class="float-right">D</p> 
</div> 

CSSコード：あなたは、線形勾配の位置を定義した後、あなたはより多くの色を使用することができます

.background-wrapper { 
    position: relative; 
    width: 600px; 
    height: 250px; 
    color: #FFFFFF; 
    padding: 20px 50px 80px 50px; 
    background: linear-gradient(to left bottom, pink 50%, blue 50%); 
} 

.float-left { 
    float: left; 
} 

.float-right { 
    float: right; 
} 

Demo jsfiddle here

Answer 1

クロスブラウザであるが、がの色で塗られていることは、片側が白、反対側が黒である半透明のグラデーションで三角形をオーバーレイすることです。

このエフェクトは、ブレンドモードを使用する方がはるかに優れていますが、サポートは低くなります。

.test { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%, 
 
    rgba(255,255,255,0) 60%, rgba(255,255,255,.5)), 
 
    linear-gradient(to top right, blue 50%, fuchsia 50%); 
 

 
}

<div class="test"></div>

Answer 2

、あなたので、次のようなことができる：

background: linear-gradient(to left bottom, deeppink 0%, pink 50%, blue 50%,midnightblue 100%); 

あなたupdated fiddle

Answer 3

を確認してください、私はかなり元からあなたのコードを変更しました。私は背景として2つの新しい要素を追加しました。あなたが探している解決策ではないかもしれないが、これは私の頭の上から外れている。

Fiddle

.background-wrapper { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 250px; 
 
    color: #FFFFFF; 
 
    padding: 20px 50px 80px 50px; 
 
    overflow: hidden; 
 
} 
 
.triangle { 
 
    position: absolute; 
 
    top: -65%; 
 
    right: -30%; 
 
    width: 125%; 
 
    height: 125%; 
 
    transform: rotate(26.5deg); 
 
    background: linear-gradient(to right, pink, #f44274); 
 
} 
 
.triangle.bottom { 
 
    top: initial; 
 
    right: initial; 
 
    left: -30%; 
 
    bottom: -64.8%; 
 
    background: linear-gradient(to right, blue, navy); 
 
}

<div class="background-wrapper"> 
 
    <div class="triangle top"></div> 
 
    <div class="triangle bottom"></div> 
 
</div>

Answer 4

.background-wrapper { 
    position: relative; 
    width: 800px; 
    height: 450px; 
    background: #ffffff; 
/* Old Browsers */background: -moz-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%); 
/* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, #ffffff), color-stop(49%, #6176ff), color-stop(50%, #ff80d9), color-stop(100%, #ffffff)); 
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%); 
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%); 
/* Opera 11.10+ */background: -ms-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%); 
/* IE 10+ */background: linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%); 
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
/* IE6-9 fallback on horizontal gradient */ 
} 

.float-left { 
    float: left; 
} 

.float-right { 
    float: right; 
} 

あなたは勾配角度を指定することができます。上記のコードを試してください。幅と高さで動作します。