CSS で斜めの角を作成し、境界線を維持するにはどうすればよいですか?

CSS を使用した角度のあるコーナーの作成

多くの人が CSS を使用して複雑なデザインを実現しようと努めており、角度のあるコーナーの作成もその 1 つです。グレーの境界線を同時に保持するマスクを使用するのと同じように、そのような形状内で画像をクリップすることが可能かどうか疑問に思うかもしれません。

このタスクには、キャンバスまたは SVG の利用を検討できます。ただし、親コンテナ内で :before 要素と :after 要素を使用すると、純粋な CSS で同様の効果を実現できます。

まず、親コンテナに境界線を割り当てます。次に、:before 要素を追加して角をブロックし、-1px オフセットして境界線をカバーします。最後に、:before からわずかにオフセットした :after 要素を導入して、カットオフの内側の線を作成します。

この方法にもかかわらず、45 度の線の太さを維持するのは若干の課題が残ります。

次の CSS および HTML コードを考えてみましょう:

.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><p>このアプローチは、目的の値に近似します。境界線を維持しながら角を斜めにします。</p></div>

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