Shulou(Shulou.com)06/01 Report--

This article is about how to use CSS filter to achieve concave smooth fillet effect. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use CSS to implement the following layout:

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

When it comes to rounded corners or wave effects, it will be much more difficult.

To achieve this kind of continuous smooth curve is actually quite troublesome, of course, it is not completely impossible. In this article, we will take a look at some possible ways to achieve the above concave smooth fillet effect using CSS.

Using the connection of circles to realize

The first method is stupid. We can use the convergence of multiple circles to achieve.

First, we will implement a rectangle with a rectangle dug out of the inside:

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%; background-position: 00,020px; background-repeat: no-repeat;}

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

The next step is to stack three circles with pseudo elements, something like this:

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

Slightly, by changing the color of the three circles, we can get the following effect:

As you can see, the effect achieved through the superposition of three circles is not very good, it can only be said to be barely restored, and if the background color is not a solid color, it will be worn through:

Implemented through filter

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

You might be surprised to hear the filter, huh? This effect seems to have nothing to do with the filter, does it?

Here is the moment to witness miracles.

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

.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 a simple figure like this:

When you see this, you must wonder why this graphic needs to be nested with 3 layers of div. Isn't one div enough?

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

Let's briefly modify the above code and take a closer look at 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 added filter: contrast (20) and background-color: white to .g-content and filter: blur (10px) to .g-filter.

Something amazing happened, and we got this effect:

The blurred edges of the Gaussian blur are killed by the contrast filter, turning the original right angle into a fillet, Amazing.

A more intuitive experience through a Gif diagram:

Here are a few details to pay attention to:

For .g-content layer, you need to set background and overflow: hidden (you can try to remove it yourself to see the effect)

The right angle on the outside also becomes a fillet.

Based on the second point above, the outer right angle also becomes a fillet. If you want this fillet to be a right angle, you have. G-container layer, we can cover the four corners into right angles by adding a pseudo element in 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);}}

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

Of course, the above smooth concave fillet due to the application of the blur filter, it is no longer recommended to place DOM inside, it is best to use it as a background, and the internal content can be superimposed on top of it in other ways.

Thank you for reading! This is the end of this article on "how to use CSS filter to achieve concave smooth fillet effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.