境界線のない Div に斜めのエッジを作成するにはどうすればよいですか?

Div に斜めのエッジを作成する: 新しいアプローチ

境界線を利用せずに斜めの div を作成する試みとして、応答性を維持し、傾斜効果の影響を受けずにテキストを含めることができます。

斜めの使用擬似要素

斜めのエッジを実現する鍵は、歪んだ擬似要素を利用することにあります。この要素を組み込むことで、背景色を 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;
}

説明

擬似要素は div 内に絶対的に配置されます。 transform-origin プロパティは要素の右下隅に設定され、スキュー効果がその点から確実に発生するようにします。実際のスキューは、要素を反時計回りに 45 度回転して、transform プロパティを通じて適用されます。擬似要素に負の Z インデックスを与えることで、それを div のコンテンツの背後に配置し、オーバーフロー部分を効果的に隠します。

このアプローチにより、斜めのエッジ効果を損なうことなく div 内にテキストを追加できます。

例

<div>slanted div text</div>
<div>
  slanted div text<br/>
  on several lines<br/>
  an other line
</div>
<div>wider slanted div text with more text inside</div>

以上が境界線のない Div に斜めのエッジを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。