ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で平面角と円弧面取りを実装するスタイルメソッド

CSS で平面角と円弧面取りを実装するスタイルメソッド

一个新手オリジナル: 2017-09-07 10:38:133473ブラウズ

Web デザインでは、コーナーカットのスタイル要件に遭遇することがあります。画像を使用するかノードオーバーレイを使用するかにかかわらず、ここでは CSS を使用してコーナーカットスタイルを実現できます。コーナーカットスタイルを実装します。
単一のコーナーをカット:
CSS で平面角と円弧面取りを実装するスタイルメソッド

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

上記の CSS を使用してスタイルを実現し、角度を変更して任意の角度でコーナーカット効果を実現できます。
2つの角をカット:
CSS で平面角と円弧面取りを実装するスタイルメソッド

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

上記のスタイルでは、著者は読者が意味を理解しやすいように2つの色を使用しています。
2つのコーナーを実現、4つのコーナーが簡単です。
4 つのコーナーの面取り:
CSS で平面角と円弧面取りを実装するスタイルメソッド

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

上記のスタイルは 4 つの平らなコーナーの面取りを実装しています。そこで、さらに考えてみましょう。円弧の面取りを実現するにはどうすればよいでしょうか?
曲線コーナー:
CSS で平面角と円弧面取りを実装するスタイルメソッド
ご覧のとおり、パターンは従来のカミソリの刃に似ています。このスタイルを実現するのは難しくありません。線形グラデーションの代わりに放射状グラデーションを使用できます。

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

コーナーカットの効果を実現したい場合は、インライン SVG や境界線画像ソリューション、トリミングパスソリューションなど、他にも多くのソリューションがあります。興味のある読者は、自分で調べて試してみることができます。

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

以上がCSS で平面角と円弧面取りを実装するスタイルメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：box-shadowを使ってCSSで曲線エッジシャドウとワープエッジシャドウを実現する例を詳しく解説次の記事：box-shadowを使ってCSSで曲線エッジシャドウとワープエッジシャドウを実現する例を詳しく解説

続きを見る

CSS で平面角と円弧面取りを実装するスタイル メソッド

関連記事

CSS で平面角と円弧面取りを実装するスタイルメソッド