CSS - リニアグラデーションのクリスプ境界

Question

私は直線グラジエントを使用して、台形のような境界線を持つdivの2つのセクションを生成しています。私は2つの色の間に鮮明な境界を得ることができません、私はグラデーションの非常に狭い領域を取得 - 私はそれを減らすことができましたが、私は完全にそれを減らすことができませんでした。

これは私が使用しているコードである：

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(49%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

Answer 1

勾配のあなたの宣言は#ffffffと​​間の1％のステップを生成します。

background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 

に

background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 

からこれを変更し、あなたが鮮明な境界を取得します（ただし、角度は、むしろ最適ではない）：そこA Collection of Separator Stylesオン

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(50%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

次のことができます多くの異なるシャープなセパレータスタイル。あなたのアプローチに役立つかもしれません。

Answer 2

を私は/相対絶対と擬似要素の前に位置を使用して溶液を作成しました。ここでは、です：

//HMTL(PUG) 
.buyers-div 

CSS(SASS) 
.buyers-div 
    position:relative 
    width: 100% 
    height: 500px 
    background-color: #197f88 
    overflow: hidden 
    &:before 
    content: '' 
    position: absolute 
    width: 100% 
    height: 500px 
    background-color: white 
    left: -50% 
    transform: skew(-45deg) 

チェックSOLUTION

THANKS、T04435

は