基礎となる画像を隠さずに、Div の応答性の高い斜めのエッジを作成するにはどうすればよいですか?

Div の応答性の高い斜めのエッジを作成する

問題:

境界線を使用せずに div の斜めのエッジを作成するそれは根底にあるものを曖昧にするでしょう

解決策:

斜めの擬似要素:

斜めの擬似要素を利用して、画像を維持しながら斜めの背景を作成します。上記のテキストコンテンツ

変換原点:

擬似要素の変換原点を、傾斜の目的のアンカー ポイント (この場合は右下隅) に設定します。

スキュー変換:

擬似要素にスキュー変換して、それに応じて角度を付けます (例: -45 度)。

オーバーフロー:

オーバーフローを使用: 非表示;疑似要素のオーバーフロー部分を非表示にします。

負の Z-インデックス:

負の Z-インデックスを使用して疑似要素を div コンテンツの後ろに配置します。

例コード:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}

結果:

このソリューションにより、テキスト コンテンツに影響を与えない、応答性の高い div の傾斜エッジを作成できます。

以上が基礎となる画像を隠さずに、Div の応答性の高い斜めのエッジを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。