2

私が達成しようとしていることを言葉で表現するのは難しいので、サンプルとしてこの写真をチェックしてください:

サンプル背景画像

ご覧のとおり、パターンの背景を持つ傾斜した div を作成しようとしています (簡単です) が、他の部分、傾斜が半分覆われている部分にも背景画像が必要です。私はさまざまなアイデアを考え、background-clip、background-origin、div の前後、および CSS トライアングルを使用してみました。純粋な CSS でこれを行う方法はありますか? 画像を 1 つに結合したり、ここでフォトショッピングをしたりする必要はありません。

4

2 に答える 2

6

スキュー変換を使用する必要があります。上の部分に 1 つの div、下の部分に別の div を適用し、それらを歪ませてから、:before実際に背景を適用するそれぞれの擬似の歪曲を解除します。

デモ

HTML :

<div class='wrap'>
  <div class='s'></div>
  <div class='s'></div>
</div>

関連するCSS :

.wrap { width: 4em; height: 28em; }
.s {
  overflow: hidden;
  height: 50%;
  transform: skewY(-30deg);
}
.s:before {
  display: block;
  height: 100%;
  transform: skewY(30deg);
  content: '';
}
.s:first-child:before {
  margin: 2em /* width*sin(abs(skew_angle)) = 4em*sin(30deg) */ 0 0;
  background: url(image.jpg) 50% 50%;
}
.s:last-child:before {
  margin: -2em /* -width*sin(abs(skew_angle)) */ 0 0;
  /* pattern background */
}
于 2013-03-13T20:20:42.330 に答える
0

レイヤーの z-index プロパティを設定し、必要な場所に配置します。z-index プロパティを使用して div の位置を設定してください。そうしないと、エラーが発生する可能性があります

于 2013-03-13T18:47:02.533 に答える