Tricks to Cut Corners Using CSS Mask and Clip-Path Properties

This article explores creative corner cutting techniques using CSS mask and clip-path properties. We'll build upon previous work with CSS masks to create diverse corner shapes using reusable code and adjustable variables. An online CSS generator is referenced to visualize the results.

Two primary cut types are examined: circular and angled. Each allows for full shape or border-only outputs, and corner selection.

The CSS mask property is heavily utilized. If unfamiliar, a quick primer is recommended before proceeding.

Circular Cut-Outs

Circular cuts employ radial-gradient(). Four gradients, one per corner, are initially used. Each gradient covers a quarter of the element's dimensions. A sample gradient:

<code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

This creates a 30px radius circle at the top-left, transparent (#0000) at the center, and red elsewhere. Minor adjustments (e.g., 98% instead of 100%) prevent jagged edges.

Optimized code uses custom properties:

<code>--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%;
mask-size: 51% 51%;
mask-repeat: no-repeat;</code>

The generator uses a slightly different, more concise syntax.

Fewer Gradients?

Yes! One gradient can suffice. The trick involves a single, full-size radial-gradient() with its position adjusted to create the illusion of four cut corners. This method requires knowing the element's dimensions. A workaround using percentages and a slightly smaller gradient size (99.5%) is presented, but has limitations with decimal dimensions. A final, superior single-gradient method uses negative offsets to achieve the same effect without rounding issues.

Corner disabling is achieved by removing the relevant gradient(s) and adjusting the remaining gradient sizes.

Circular Border-Only Cut-Outs

Creating border-only shapes requires a pseudo-element to avoid obscuring content. Different configurations (one, two, three, or four cut corners) necessitate varying combinations of radial-gradient() and conic-gradient() to achieve the desired border effect. The article details these combinations, highlighting the use of repeat-y to reduce the number of gradients needed in some cases.

Angled Cut-Outs

Angled cuts utilize conic-gradient(), one per corner. Each gradient's from and at positions are adjusted to create the angled cut. Disabling corners follows the same principle as circular cuts. clip-path offers an alternative, defining each corner with three points. A formula for calculating these points is provided. The 90-degree angle case allows for optimization, using a single gradient.

Border-Only Angled Cut-Outs

The clip-path method is preferred over gradients for border-only angled cuts due to complexity and potential anti-aliasing issues with gradients. The article outlines the clip-path approach, detailing the calculation of inner and outer points. The 180-degree case allows for code optimization.

Conclusion

The article demonstrates the power and flexibility of CSS mask and clip-path for creating complex shapes. While detailed explanations are provided, the accompanying online generator simplifies code generation, making these techniques accessible for various design needs.

The above is the detailed content of Tricks to Cut Corners Using CSS Mask and Clip-Path Properties. For more information, please follow other related articles on the PHP Chinese website!