css - 透明性の頭痛

Question

私の質問を理解するための視覚的な例を示すために、画像を作成しました。

HTML の例 (jsfiddle)

ご覧のとおり、コンテンツ列に沿って循環することを目的としたアクティブな矢印があります。ただし、白い背景を削除するときは、コンテンツからではなく、ヘッダーの背景から透明度が必要です。

ヘッダーの背景に到達するためにコンテンツの背景を焼き尽くすトリックはありますか?

見やすくするために追加の画像を作成しました。

注: 無地ではなくパターンを背景として使用しています。

Answer 1

私の最初の考えは、コンテンツ領域の背景に透明な三角形が食い込んだものです。次に、コンテンツに負のマージンを適用します。次に、コンテンツの位置をrelativeに設定し、そのtopプロパティを負の量に設定し、ヘッダーの下の余白を同じ量に設定します。

これに似た何か？http://jsfiddle.net/sT53s/

Answer 2

css3 の回転プロパティで遊ぶことができます。このhttp://jsfiddle.net/TgWMH/18/を確認してください。

HTML

<div class="arrow three"></div>

CSS

.arrow.three:after {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") repeat scroll 0 0 transparent;
    content: "";
    height: 200px;
    left: -14px;
    position: absolute;
    top: 0;
    width: 200px;
}
.arrow.three {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    background: none repeat scroll 0 0 transparent;
    height: 100px;
    margin-top: -51px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

Answer 3

CSS3 マルチ背景版

コンテンツ領域の背景色が常に単色である限り、次の変更を使用できます。

.header {
  height: 200px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

追加fixedすることで、その背景画像が使用されている他の場所で正しく整列する必要があります。次に、この変更があります。

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0,
    url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

次に、矢印領域自体が透明になり、矢印の外側の部分にコンテンツの背景色が含まれるように、arrow2.png を反転するだけです。

明らかに、これは複数の背景をサポートするブラウザーでのみ機能します。

CSS2 単一背景バージョン

考えてみれば、今日は私の頭がかなり遅いので...複数の背景を使用する必要はありません。次のように矢印マークアップを作成できます。

<div class="arrow2">
  <div class="arrow-inner"></div>
</div>

次に、4170671240_a90769d747.jpg.arrow2 に固定の背景を適用しますが、実際のarrow2.png背景を .arrow-inner に適用します。この方法では、古いブラウザーは正常に機能するため、例外を設ける必要はありません。

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

.arrow-inner {
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0;
}

これを機能させるには、arrow2.png を反転する必要があります。これにより、矢印領域が透明になり、外側が透明になりません。

Answer 4

これはかなり古い投稿ですが、2 つの疑似要素の問題を解決するこのコード ペンをチェックしてください。これは sass mixin であり、好きなエッジ、幅、三角形の位置ごとに構成できます。http://codepen.io/gionkunz/pen/ihgwH