Style methods to implement flat angles and arc chamfers in css

In web design, sometimes you will encounter some style requirements for corner cutting. There are many ways to achieve it, whether it is using pictures or node overlay coverage, you can achieve it. Corner-cutting style, here I directly use css to implement the corner-cutting style.
Cut a single corner:

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

You can use the css shown above to achieve the style, and modify the angle to achieve the corner-cutting effect at 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 readers to understand the meaning.
Two corner cuts are achieved, and four corner cuts are easy.
Four corner chamfers:

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

The above style implements four flat corner chamfers, so let us further conceive how to achieve arc chamfers. ?
Arc Angle Cut:

As you can see, the pattern is similar to a traditional razor blade. It is not difficult to achieve this style. We can use radial gradients instead of linear gradients.

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

If you want to achieve the effect of corner cutting, there are many other solutions, such as inline svg and border-image solutions, cropping path solutions, etc. Interested readers can explore and try them by themselves.

In web design, sometimes you will encounter some style requirements for corner cutting. There are many ways to achieve it, whether it is using pictures or node overlay coverage, you can achieve it. Corner-cutting style, here I directly use css to implement the corner-cutting style.
Cut a single corner:

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

You can use the css shown above to achieve the style, and modify the angle to achieve the corner-cutting effect at 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 readers to understand the meaning.
Two corner cuts are achieved, and four corner cuts are easy.
Four corner chamfers:

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

The above style implements four flat corner chamfers, so let us further conceive how to achieve arc chamfers. ?
Arc Angle Cut:

As you can see, the pattern is similar to a traditional razor blade. It is not difficult to achieve this style. We can use radial gradients instead of linear gradients.

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

If you want to achieve the effect of corner cutting, there are many other solutions, such as inline svg and border-image solutions, cropping path solutions, etc. Interested readers can explore and try them on their own.

The above is the detailed content of Style methods to implement flat angles and arc chamfers in css. For more information, please follow other related articles on the PHP Chinese website!