修整背景

Question

...

this is the look that I want

私は一色だけを持っているちょうどその時、それは完璧に動作し、回転/スキュー長方形でメソッドを使用して試してみました（私は形に同じ色を使うことができるので）以下のセクションで説明します。私が添付した画像のようなテクスチャを使用したい場合は、私が使用する方法に応じてthisを持つことになります。私も形状を作るためにsvgを使ってみましたが、それが最善の解決策かどうかはわかりません。私はこれを行う巧妙な方法があるかどうか疑問に思っています。多分私ははっきりとしたものではないと思いますが、これを読む時間を見つけてくれてありがとう。

Answer 1

これは概念です。自分のプロジェクトを作業してみてください。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    width: 100vw; 
 
    padding-top: 50%; 
 
    position: relative; 
 
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 66.6666667%, rgba(255, 255, 0, .6) 66.6666667%), url(http://beerhold.it/1200/600); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper:nth-child(2) { 
 
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 100%), url(http://beerhold.it/1400/700); 
 
    } 
 

 
.topleft, 
 
.topright, 
 
.bottomleft, 
 
.bottomright { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
.topleft { 
 
    left: 0; 
 
    top: 40%; 
 
    width: 66.66666667%; 
 
    background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(7deg); 
 
} 
 
.topright { 
 
    left: 66.66666667%; 
 
    width: 33.33333334%; 
 
    top: 42.3%; 
 
    background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(-10deg); 
 
} 
 

 
.bottomleft { 
 
    left: 0; 
 
    top: -94%; 
 
    width: 33.33333334%; 
 
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(-10deg); 
 
} 
 
.bottomright { 
 
    left: 33.33333334%; 
 
    width: 66.66666667%; 
 
    top: -92%; 
 
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(7deg); 
 
}

<div class="wrapper"> 
 
    <div class="topleft"></div> 
 
    <div class="topright"></div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="topleft"></div> 
 
    <div class="topright"></div> 
 
    <div class="bottomleft"></div> 
 
    <div class="bottomright"></div> 
 
</div>

Answer 2

あなたはおそらくあなたの形状があることを行っている方法を複雑に応じて、SVGsとマスクを試したいと思うでしょう。あなたはここでいくつかの大きなガイダンスを見つけることができます：https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/。

IllustratorはSVGとして保存できますが、Sketchを使用している場合はさらに簡単です！あなたは、コードが個々の座標を出力することに気付くでしょう。

あなたはここにまともなデモを見ることができます：http://cssplant.com/clip-path-generator