CSS フィルターを使用して、凹型で滑らかな丸い角を実現する方法について説明しましょう。

CSS を使用して、凹型で滑らかな丸い角を実現するにはどうすればよいですか?次の記事では、CSSフィルターを上手に使って、凹んだ滑らかな角丸を実現する方法を紹介しますので、ぜひ参考にしてください。

ある日、グループ メンバーがグループ内で、CSS を使用して次のレイアウトを実現する方法について質問を提起しました:

CSS の世界では、次のような効果だけであれば、非常に簡単に実現できます。

角丸や波の効果を加えると、難易度が上がります。

このように連続した滑らかな曲線を実現するのは実はかなり面倒ですが、もちろん全く不可能ではありません。この記事では、CSS を使用して上記の凹型で滑らかな角丸効果を実現するいくつかの方法を紹介します。 [推奨される学習: css ビデオ チュートリアル ]

円の接続を使用して達成する

最初の方法は比較的愚かです。これを実現するには、複数の円の接続を使用します。

まず、内側に四角形をくり抜いた四角形を実装します。

<div></div>

コアの CSS コードは次のとおりです。

div {
    height: 200px;
    background: 
        linear-gradient(90deg, #9c27b0, #9c27b0 110px, transparent 110px, transparent 190px, #9c27b0 190px),
        linear-gradient(90deg, #9c27b0, #9c27b0);
    background-size: 100% 20px, 100% 100%;
    background-position: 0 0, 0 20px;
    background-repeat: no-repeat;
}

このようなグラフィックを取得します (多数あります)これを実装する方法。ここではグラデーションを使用しています):

次に、疑似要素を使用して 3 つの円を重ね合わせます。これはおそらく次のようになります:

div {
    ...
    &::before {
        position: absolute;
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #000;
        left: 90px;
        box-shadow: 40px 0 0 #000, 80px 0 0 #000;
    }
}

3 つの円の色を少し変更すると、次のような効果が得られます。

ご覧のとおり、このような効果が得られます。 3 つの円による効果 重ね合わせの効果はあまり良くありません。かろうじて復元されているとしか言えません。背景色が単色でないと混乱します:

完全なコードはここをクリックしてください: CodePen デモ - 滑らかな凹面の丸い角

https://codepen.io/Chokcoco/pen/oNGgyeK

フィルターを介して実現

以下がこの記事です。重要な点は、フィルターを使用してこの効果を実現する 方法を紹介することです。

フィルターについて聞くと驚かれるかもしれませんね。この効果はフィルターとは関係ないようですよね？

次は奇跡を目撃する瞬間です。

まず、次のようなグラフィックを実装するだけです:

<div class="g-container">
    <div class="g-content">
        <div class="g-filter"></div>
    </div>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        
        .g-filter {
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #000 40px, #000);
        }
    }
}

このような単純なグラフィックを取得します:

これを参照してください。間違いなく、なぜこのグラフィックを 3 層の div でネストする必要があるのか​​疑問に思われるかもしれません。 div で十分ではないでしょうか?

は、

filter:contrast() と filter:blur() の魔法の組み合わせを使用する必要があるためです。

上記のコードを単純に変換して、上記の CSS との類似点と相違点を注意深く観察してみましょう:

.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        filter: contrast(20);
        background-color: white;
        overflow: hidden;
        
        .g-filter {
            filter: blur(10px);
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 29px, #000 40px, #000);
        }
    }
}

filter:contrast(20 ) と background を追加しました。 -color:白、filter:blur(10px)を.g-filterに追加しました。 魔法が起こり、このような効果が得られました。

コントラスト フィルターを使用して、ガウスぼかしのぼやけたエッジを削除します。元の直角を丸い角に変換した、素晴らしい。

Gif を通じてより直感的な感覚を得る:

ここで注意すべき詳細がいくつかあります:

.g-content

このレイヤーは背景と
• overflow: hidden

  を設定する必要があります (効果を確認するために自分で削除してみてください) 外側の直角も角丸になっています

• 上記2点目を踏まえて、外側の直角も角丸になっています。 g-container

  このレイヤーでは、四隅を直角にする疑似要素をこのレイヤーに追加できます:

.g-container {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        background: radial-gradient(circle at 50% -10px, transparent 0, transparent 60px, #000 60px, #000 0);
    }
}

中央部分のみが凹型の丸い角で、残りの 4 つの角は直角であることがわかります。

完全なコードについては、ここをクリックしてください: CodePenデモ - フィルターによる滑らかな凹面の丸いコーナー

https://codepen.io/Chokcoco/pen/JjroBPo

もちろん、上記の滑らかな凹面の丸い角にぼかしフィルターが適用されているため、DOM を内部に配置することはお勧めできません。バックグラウンドで使用する場合は、他の方法でその上に内部コンテンツを重ね合わせることができます。

filter:contrast() と filter:blur() の魔法の融合エフェクトについては、この記事をクリックして詳細をご覧ください。不明な CSS フィルターのスキルと詳細

https://github.com/chokcoco/iCSS/issues/30

最後に

この記事の実装にはいくつかあります。凹面の滑らかな丸みを帯びたコーナーを作成する他の方法もあり、本質はこの記事の最初の方法と似ていますが、これらはすべて重ね合わせた欺瞞的な方法であるため、1 つずつリストすることはしません。この記事の中心的な目的は、2 番目のフィルター方法を紹介することです。

さて、この記事はここで終わります。この記事がお役に立てば幸いです :)

(学習ビデオ共有: Web フロントエンド )

以上がCSS フィルターを使用して、凹型で滑らかな丸い角を実現する方法について説明しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。