CSS で :before と :after 擬似要素のみを使用して角度のあるコーナーを作成するにはどうすればよいですか?

CSS での角度のあるコーナー: 詳細なソリューション

純粋な CSS を使用して角度のあるコーナーを作成することは可能ですが、いくつかの課題があります。これを実現するには、境界線のある親コンテナ内で :before 要素と :after 要素を利用する必要があります。

1. コンテナに境界線を追加します: コンテナの周囲に境界線を確立します。コンテナ要素を使用して、表示される境界を定義します。
2. コンテナ要素をブロックする :before 要素を作成します。 Corner: ピクセル単位で指定されたボーダートップ スタイルを持つ :before 要素を追加して、実線の垂線を作成します。コンテナの境界線を考慮して、この要素を -1 ピクセルだけオフセットします。
3. 内側の線を作成する :after 要素を追加します: よりわずかに小さいオフセットを持つ :after 要素を導入します。 :before 要素。 :after 要素の境界線の上部スタイルを白などの別の色に設定して、カットオフ領域内に対照的な線を作成します。

このテクニックは目的の効果に近似しますが、 45 度の線の太さに若干の問題が発生する可能性があります。

例コード:

.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;
}

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

以上がCSS で :before と :after 擬似要素のみを使用して角度のあるコーナーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。