CSSの回し幅/固定ピクセル値

Question

TLDRに応じて： ターゲット背景としてグラデーションで回転div要素を持つことである：説明は

長い：私はこのようにスケーラブルなソリューションをachiveたい。しかし、問題は、ブラウザの幅に応じて変化するため、回転をdegとして定義できないことです。したがって、エレメントはブラウザの幅の100％で、の固定された高さが左側にあるで、右側の高さが固定されている必要があります。

基本的にこれは、水平にのみ伸びる画像の背景で簡単に行うことができます。問題は、同じ領域にクリップする必要のあるパターンオーバーレイがある必要があります。これは繰り返す必要があります（これらのパターンが等しいボックスで構成されていることがわかります）。特定のターゲットピクセルの要素を回転させることは可能ですか？

現在の例：

.triangleClipper { 
    height: 100px; 
    overflow: hidden; 
} 

.designElement { 
    background: linear-gradient(to right, #03cc65, #fbfe02); 
    height: 100px; 
    width: 200%; 
    transform-origin: top left; 
    transform: rotate(-2deg); 
    margin-top: -60px; 
} 

https://jsfiddle.net/0egg320q/ ブラウザのサイズを変更するときは、右端の問題を参照してください。したがって、幅の画面では、三角形の端が見え、小さすぎる画面は大きすぎます。ターゲットは、すべてのブラウザサイズで左端と右端に同じ高さを維持することです。

他のアイデアを歓迎します。

Answer 1

clip-pathをパーセントで使用することができます。このようにあなたはいつもあなたの固定の高さを持つことになりますあなたが必要として、あなたは直線勾配を単に回転させることができる：

body { 
 
background:#ccc; 
 
} 
 

 
.triangleClipper { 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.designElement { 
 
    background: linear-gradient(10deg, #03cc65, #fbfe02); 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: polygon(120% 0, 0 0, 0 100%); 
 
    clip-path: polygon(120% 0, 0 0, 0 100%); 
 
}

<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

このプロパティは、それがすべてでサポートされていないとして、あなたが唯一の注意を払う必要がありますブラウザ。

擬似要素を使って別の解決策が、この場合には、あなたは、底部が着色し、透明ではなくなります。

body { 
 
    background:#ccc; 
 
} 
 
.triangleClipper { 
 
    height: 100px; 
 
    overflow: hidden; 
 

 
} 
 

 
.designElement { 
 
    background: linear-gradient(10deg, #03cc65, #fbfe02); 
 
    height: 100%; 
 
    width: 100%; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.designElement:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-right: 120vw solid #fff; 
 
    border-bottom: 100px solid #fff; 
 
    border-top: 100px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

UPDATE

もう一つの良い解決策使用してスキュー変換といくつかの％プロパティがあります。この解決方法では高さは固定されませんが、の2つの高さの比率が固定されます。それも面白いかもしれません。

body { 
 
    background: #ccc; 
 
} 
 

 
.triangleClipper { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding-top: 30%; 
 
} 
 

 
.designElement { 
 
    background: linear-gradient(to right, #03cc65, #fbfe02); 
 
    padding-top: 100%; 
 
    margin-top: -120%; 
 
    width: 100%; 
 
    transform: skewY(-7deg); 
 
}

<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

Answer 2

クリップパスのクロスブラウザーの方法（特にIE）を検索した後、私はSVGを使用すると、そのための最善の解決策であることが分かりました。

悲しいことに、SVGはポリゴンのパーセント値をサポートしていないので、JavaScriptを追加して修正するだけで、ブラウザのサイズに応じて値を修正することができます。 （基本的なSVGオブジェクトをスケーリングするための動作では、JSは、パターン画像の出力を補正するためにのみ存在する。）

$(function() { 
 

 
    //svg der fensterbreite anpassen 
 
    var fullWidth = $('.styleElementTop').width(); 
 
    console.log(fullWidth); 
 
    $('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100'); 
 
    $('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0'); 
 
    $('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0'); 
 
});

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    } 
 
    
 
    .styleElementTop { 
 
    height: 100px; 
 
    width: 100%; 
 
    } 
 
    
 
    #gradientFill { 
 
    fill: url(#mainGradient); 
 
    } 
 
    
 
    #patternFill { 
 
    fill: url(#mainPattern); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="styleElementTop"> 
 
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none"> 
 
    <defs> 
 
     <linearGradient id="mainGradient"> 
 
     <stop stop-color="#03cc65" offset="0%" /> 
 
     <stop stop-color="#fbfe02" offset="100%" /> 
 
     </linearGradient> 
 
     <pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> 
 
     <image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" /> 
 
     </pattern> 
 
    </defs> 
 
    <polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon> 
 
    <polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon> 
 
    </svg> 
 
</div>