CSS で平面角と円弧面取りを実装するスタイルメソッド-CSSチュートリアル-php.cn

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

一个新手

リリース： 2017-09-07 10:38:13

オリジナル

3442 人が閲覧しました

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 サイトの他の関連記事を参照してください。