CSS は、表示される境界線を維持しながら、角度のあるコーナーを作成し、画像をクリップできますか?

CSS 角度付きコーナーの作成と画像クリッピング

CSS を利用して、45 度の角度付きコーナーを伴う特定の形状を作成できますか?さらに、要件には、灰色の境界線が表示されたままになるマスクを使用するのと同様に、シェイプ内で画像をクリップすることも含まれます。

CSS 内でこのタスクの実現可能性を厳密に検討すると、境界線を維持することが課題となることが明らかになります。それにもかかわらず、:before および :after 疑似要素を親コンテナと組み合わせて利用する解決策が考案されました。 :before と :after を img タグに直接適用できないため、次のアプローチが採用されます:

1. コンテナ要素の境界線を確立します。
2. コンテナ要素に :before 要素を作成します。コーナーを遮り、その位置を -1px オフセットして境界線を隠します。
3. コーナーからわずかにオフセットして :after 要素を追加します。 :before 要素を使用して、断面図の内側に線を生成します。

このアプローチは目的の効果に近似しますが、45 度の角度の線の太さに関する問題が発生します。 CSS コード スニペットは次のとおりです:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}

.cutCorner img {
  display: block;
}

.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: "";
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}

.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: "";
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

HTML の例は次のとおりです:

<div class="cutCorner">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" class="lazy" alt="CSS は、表示される境界線を維持しながら、角度のあるコーナーを作成し、画像をクリップできますか?" >
</div>

以上がCSS は、表示される境界線を維持しながら、角度のあるコーナーを作成し、画像をクリップできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。