background

One day, members of the group posed a question in the group, how to use CSS to achieve the following layout:

In the CSS world, it is very easy to achieve this effect if only:

Once rounded corners or wave effects are involved, the difficulty goes up a lot.

Achieving this continuous smooth curve is actually quite troublesome, of course, is not completely impossible. In this article, I’ll take a look at some of the possible ways in which CSS can be used to achieve this effect.

Using the convergence of circles

The first method is clumsy. We can implement this by joining multiple circles.

First, we’ll implement a rectangle that cuts out a rectangle inside:

<div></div>
Copy the code

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;
}
Copy the code

To get a shape like this (there are many ways to do this, but I’m using gradients here) :

The next step is to add three circles using pseudo-elements, something 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; }}Copy the code

By slightly changing the colors of the three circles, we can get something like this:

As you can see, the effect achieved by the superposition of 3 circles is not very good, it can only be said that the restoration, if the background color is not a solid color, it will be broken:

For the full code you can poke here: CodePen Demo – Smooth concave rounded corners

Implement through filter

Here, the focus of this article, is a way to achieve this effect with a filter.

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

Here’s the miracle.

First, we just need to implement a graph like this:

<div class="g-container">
    <div class="g-content">
        <div class="g-filter"></div>
    </div>
</div>
Copy the code
.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); }}}Copy the code

The result is a simple graph:

If you look at this, you might wonder, why does this graph need to be nested with three layers of divs? Isn’t one div enough?

Because we’re going to use the magic combination of filter: blur() and filter: contrast() again.

Let’s take a look at the similarities and differences between CSS and 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); }}}Copy the code

We added filter: blur(10px) to the.g-content and background-color: white to the.g-content.

And then something amazing happens, and we get this effect:

Using a contrast filter to remove the blurred edges of gaussian blur, turn the original right Angle, into rounded corners, Amazing.

To get a better sense of it, use a Gif:

Here are a few details to note:

  1. .g-contentThis layer needs to set background, needoverflow: hidden(You can try to remove it to see the effect)
  2. The right Angle on the outside becomes rounded

Based on the second point above, the outer right Angle also becomes a rounded Angle. If you want the rounded Angle to be a right Angle, you have the.g-container layer. We can cover the four corners into a right Angle by adding a pseudo-element to this layer:

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

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

For the full code you can poke here: CodePen Demo – Smooth concave rounded By filter

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

Click here to learn more about the amazing filter: contrast() and filter: blur() blending effects – CSS filter tricks and details you didn’t know about

The last

There are several other ways to achieve the concave smooth rounded corners in this article, which are similar in nature to the first way in this article. The core purpose of this article is to introduce the second filter method.

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.