[CSS disclosure] chamfer effect

Cutting corners off is also a popular design style.

The traditional solution might be to use triangles or other shapes to cover the corners to simulate the chamfer effect

With CSS3, we can use new technology to achieve

First scenario: CSS gradients

Requirement One: A rectangle needs to be cut off a 45° angle

Use linear gradients to achieve

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

In a gradient, specifying a stop distance of 0 is the same as the distance from the previous stop, so it is #58a from 15px onwards

The effect is as follows

Requirement two: One rectangle needs to cut off two 45° angles

If you still use the previous linear gradient scheme, you will find that the second gradient overrides the first gradient. Therefore, you need to adjust the coverage area of these gradients, that is, adjust the size of the background image. Do not repeat the background picture at the same time.

The effect is as follows

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

background-size:50% 100%;

Background-repeat:no-repeat;

Background-position:right Center,left Center;

The effect is as follows

Demand three: A rectangle Four Corners need to cut off 45 °

Use a 4-layer gradient to achieve this requirement

Background-image:linear-gradient (135deg, Transparent 15px, #58a 0),

Linear-gradient ( -135deg, Transparent 15px, #58a 0),

Linear-gradient ( -45deg, Transparent 15px, #58a 0),

Linear-gradient (45deg, Transparent 15px, #58a 0);

Background-repeat:no-repeat;

background-size:50% 50%;

Background-position:left top, right top, right bottom, left bottom;

The effect is as follows

Requirement four: A rectangle of Four corners need to be cut into the arc type

Arc chamfer (inner convex fillet) is realized by changing the linear gradient to a radial gradient

Background-image:radial-gradient (circle at top left, Transparent 15px, #58a 0),

Radial-gradient (circle at top right, transparent 15px, #58a 0),

Radial-gradient (circle at bottom right, transparent 15px, #58a 0),

Radial-gradient (circle at bottom left, transparent 15px, #58a 0);

Background-repeat:no-repeat;

background-size:50% 50%;

Background-position:left top, right top, right bottom, left bottom;

Second scenario: Clip-path clipping path

Any shape pattern can be cropped with any type of background

Summary: Prioritize the use of gradients to achieve chamfer effects, and when mainstream browsers start to support the Clip-path property, or when a high-end browser is satisfied, a variety of chamfer effects can be achieved by clipping.

[CSS disclosure] chamfer effect