Amazing filters! Ingeniously realize the concave smooth fillet

background

One day, group friends raised a question in the group, how to use CSS to achieve the following layout:

In the CSS world, it is still very easy to achieve the following effects:

Once it comes to rounded corners or wave effects, the difficulty will increase a lot.

Realizing such a continuous and smooth curve is actually more troublesome, of course, it is not impossible. In this article, I will show you some possible ways to use CSS to achieve the above-mentioned concave and smooth rounded corners.

Realize with the connection of circles

The first method is more dumb. We can use the connection of multiple circles to achieve.

First, we will implement a rectangle in which a rectangle is dug out:

<div></div>

The core CSS code is as follows:

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

Get such a graph (there are many ways to implement it, here I use gradient):

The next step is to superimpose three circles with pseudo-elements, which is roughly like this:

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

By slightly modifying the colors of the three circles, we can get the following effect:

It can be seen that the effect achieved by the superposition of 3 circles is not very good. It can only be said to be barely restored. If the background color is not a solid color, it will help:

here for the complete code: 161d7a5b85a489 CodePen Demo-Smooth concave rounded corners

Realized by filter

Below, is the focus of this article, will introduce a way to achieve this effect using filters .

When you hear about filters, you may be surprised, huh? This effect seems to have nothing to do with the filter, right?

Below is the moment to witness the miracle.

First of all, we only need to implement such a graph:

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

Get such a simple graph:

Seeing this, I will definitely be wondering, why does this graphic need to be nested with 3 layers of divs? Isn't one div enough?

It is because we have to use the magical combination of filter: contrast() and filter: blur()

Let's simply modify the above code and carefully observe the similarities and differences with the above 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);
        }
    }
}

We give .g-content added filter: contrast(20) and background-color: white , to .g-filter added filter: blur(10px) .

A magical thing happened, and we got this effect:

The fuzzy edges of the Gaussian blur are eliminated by the contrast filter. turns the original right angle into a rounded corner , Amazing.

A more intuitive experience through a Gif picture:

There are a few details to note here:

1. .g-content This layer needs to set the background and overflow: hidden (you can try to remove it yourself to see the effect)
2. The right angles on the outside have also become rounded corners

Based on the above second point, the right angle on the outside has also become a rounded corner. If you want this rounded corner to be a right angle, there is a .g-container . We can add a pseudo element to this layer to cover the 4 corners into Right angle:

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

We can get the effect that only the middle part is concave rounded corners, and the other four corners are right angles:

here for the complete code: 161d7a5b85a6bc CodePen Demo-Smooth concave rounded corners By filter

Of course, the above smooth concave rounded corners are not recommended to be placed inside due to the application of a blur filter. It is best to use it as a background, and the internal content can be superimposed on top of it in other ways.

Regarding the magical filter: contrast() and filter: blur() this article to learn more about - 161d7a5b85a6ed CSS filter skills and details you don’t know

At last

There are several other ways to achieve the concave smooth fillet in this article. The essence is similar to the first method in this article. They are all superimposed blinding methods, not listed one by one. The core purpose of this article is to introduce the second filter method.

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my account - 161d7a5b85a734 iCSS front-end interesting 161d7a5b85a735 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.