A style method for the realization of the angled and curved chamfer in CSS

In the web design, sometimes encounter a number of chamfer style requirements, the implementation method has many kinds, with pictures or overlap overlay, can realize the style of cutting angle, here I directly use CSS to achieve the style of cutting angle.
Cut Single angle:

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0);

Using the CSS shown above, you can implement the style and modify the angle to achieve the chamfer effect of any angle.
Cut two corners:

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;

In the above style, the author uses two colors to facilitate the reader to understand the meaning.
Two chamfer is achieved, four chamfer is easy.
Four chamfer implementations:

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-gradi ENT (45deg, Transparent 15px, #58a 0) bottom left;background-size:50% 50%;background-repeat:no-repeat;

The above style realizes the style of four angle chamfer, then we further conceive, want to realize arc chamfer how to do?
Arc Cut Angle:

As you can see, the pattern is similar to a traditional razor blade, it is not difficult to implement this style, we can use a radial gradient instead of a linear gradient.

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, #5 8a 0) Bottom right,             radial-gradient (circle at bottom left, transparent 15px, #58a 0) Bottom left;background-size:50% 50%;background-repeat:no-repeat;

To achieve the effect of chamfer, there are many other solutions, such as inline SVG and border-image scheme, cutting path scheme, etc., interested readers can explore their own attempts.

In the web design, sometimes encounter a number of chamfer style requirements, the implementation method has many kinds, with pictures or overlap overlay, can realize the style of cutting angle, here I directly use CSS to achieve the style of cutting angle.
Cut Single angle:

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0);

Using the CSS shown above, you can implement the style and modify the angle to achieve the chamfer effect of any angle.
Cut two corners:

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;

In the above style, the author uses two colors to facilitate the reader to understand the meaning.
Two chamfer is achieved, four chamfer is easy.
Four chamfer implementations:

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-gradi ENT (45deg, Transparent 15px, #58a 0) bottom left;background-size:50% 50%;background-repeat:no-repeat;

The above style realizes the style of four angle chamfer, then we further conceive, want to realize arc chamfer how to do?
Arc Cut Angle:

As you can see, the pattern is similar to a traditional razor blade, it is not difficult to implement this style, we can use a radial gradient instead of a linear gradient.

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, #5 8a 0) Bottom right,             radial-gradient (circle at bottom left, transparent 15px, #58a 0) Bottom left;background-size:50% 50%;background-repeat:no-repeat;

To achieve the effect of chamfer, there are many other solutions, such as inline SVG and border-image scheme, cutting path scheme, etc., interested readers can explore their own attempts.