Create Puzzle-Style Corners with Pure CSS – Nebo.css

Nebo.css is a pure CSS library that creates convex or concave puzzle-piece corners on HTML elements.

You don’t need SVGs or JavaScript for this puzzle corner effect; this library does it purely with CSS, using mask-image and custom properties for adjustments.

How to use it:

1. Download the nebo.css stylesheet and include it on your web page.

<link rel="stylesheet" href="nebo.css" />

2. Add the base class nebo and a corner modifier class to your target element:

<div class="element nebo nebo--tl">
  <!-- Your element content -->
  Element with a puzzle corner on the top left.
</div>
<div class="element nebo nebo--tr">
  <!-- Your element content -->
  Element with a puzzle corner on the top right.
</div>
<div class="element nebo nebo--bl">
  <!-- Your element content -->
  Element with a puzzle corner on the bottom left.
</div>
<div class="element nebo nebo--br">
  <!-- Your element content -->
  Element with a puzzle corner on the bottom right.
</div>

3. Adjust --nb-r, --nb-w, and --nb-h to control the puzzle piece’s geometry. Larger values create more pronounced effects. I’ve noticed that keeping --nb-w and --nb-h roughly proportional often looks best, but experiment based on your design.

.element {
  /* Nebo.css variables */
  --nb-r: 24px; /* Main rounding radius of the corner */
  --nb-w: 28px; /* Width of the puzzle protrusion/cutout */
  --nb-h: 28px; /* Height of the puzzle protrusion/cutout */
}

How It Works

Nebo.css achieves its puzzle-corner effect entirely through CSS mask properties. The library uses a combination of mask-image, mask-size, and mask-position properties to create the distinctive puzzle piece shape.

The core of the implementation is a complex mask composition using multiple gradients. The main workhorse is the radial-gradient that creates the circular cutout or protrusion at the corner, along with several linear gradients that mask portions of the element to create the final shape.

What I find particularly clever about Nebo’s implementation is how it uses CSS variables not just for the customizable properties (--nb-r, --nb-w, --nb-h), but also for internal calculations. The --_nb-smooth variable, for instance, controls the smoothness of the mask edges, while the position variables handle the precise placement of each mask component.

The modifier classes (like .nebo--tl) work by simply changing the values of internal CSS variables that control the mask positioning. This approach keeps the code DRY and makes the library easy to maintain. All masks are defined once, and then positioned differently based on which modifier class is applied.

Browser compatibility is solid for modern browsers that support CSS mask properties. The technique uses standard CSS features rather than experimental ones, so it works reliably across Chrome, Firefox, Safari, and Edge.

One technical detail worth noting is how the library handles the mask positioning with pixel-perfect precision. The calc(var(--nb-r) + 0.5px) adjustment in the mask size ensures that there are no rendering artifacts or gaps at the edges of the masks.

FAQs

Q: Can I apply the effect to multiple corners of the same element?
A: No, the library is designed with modifier classes for one corner per element (.nebo--tl, .nebo--tr, etc.). Trying to add multiple classes like nebo--tl nebo--br will likely result in conflicting CSS variable assignments, and only one will take effect (probably the last one in the CSS cascade). To get multiple corners, you’d need multiple nested elements or modify the library’s core CSS significantly.

Q: Does it conflict with border-radius?
A: Nebo.css uses mask-image, which essentially cuts the element to shape after background and borders are applied. Applying border-radius to the element itself won’t round the corners of the mask (those are controlled by --nb-r). It might round the underlying element before the mask is applied, but visually the mask dictates the final shape. It’s usually best to let Nebo handle the corner shaping.

Q: Can I use Nebo.css with any background type?
A: Yes, Nebo.css works with solid colors, gradients, and background images. Since it uses CSS masks rather than border properties or backgrounds for the effect, your original background will show through correctly regardless of what it is.

Q: Does Nebo.css work with content that might overflow?
A: The mask applies to the entire element, so any content inside the element will respect the mask boundaries. If you have content that might extend into the corner areas, you’ll need to adjust your padding to prevent it from being cut off by the mask.

The post Create Puzzle-Style Corners with Pure CSS – Nebo.css appeared first on CSS Script.