Exploring the CSS Paint API: Polygon Border

Creating intricate shapes with clip-path is straightforward, but adding borders presents a persistent challenge. CSS lacks a robust solution, often requiring cumbersome workarounds. This article demonstrates a solution using the CSS Paint API.

This CSS Paint API exploration series continues:

• Part 1: Image Fragmentation Effect
• Part 2: Blob Animation
• Part 3: Polygon Border (current article)
• Part 4: Rounding Shapes

This article details creating polygon borders. Remember, this technique is currently supported only in Chromium-based browsers (Chrome, Edge, Opera). Check caniuse for the latest compatibility information.

The code remains concise and adaptable, requiring only minor variable adjustments to modify the shape.

Core Concept

The polygon border is achieved by combining clip-path and a custom mask generated with the Paint API:

1. Begin with a standard rectangle.
2. Apply clip-path to shape it into a polygon.
3. Apply a custom mask to create the polygon border.

CSS Structure

The CSS for the clip-path step is:

.box {
  --path: 50% 0,100% 100%,0 100%;

  width: 200px;
  height: 200px;
  background: red;
  display: inline-block;
  clip-path: polygon(var(--path));
}

The key is the CSS variable --path. Both clip-path and the mask utilize this variable for consistent parameters.

The complete CSS code becomes:

.box {
  --path: 50% 0,100% 100%,0 100%;
  --border: 5px;

  width: 200px;
  height: 200px;
  background: red;
  display: inline-block;
  clip-path: polygon(var(--path));
  -webkit-mask: paint(polygon-border);
}

Besides clip-path, a custom mask is applied, and --border controls border thickness. The CSS remains simple and generic, highlighting the Paint API's ease of use.

JavaScript Implementation

Refer to Part 1 of this series for a better understanding of the Paint API structure.

The paint() function's JavaScript code:

const points = properties.get('--path').toString().split(',');
const b = parseFloat(properties.get('--border').value);
const w = size.width;
const h = size.height;

const cc = function(x,y) {
  // ...
}

var p = points[0].trim().split(" ");
p = cc(p[0],p[1]);

ctx.beginPath();
ctx.moveTo(p[0],p[1]);
for (var i = 1; i 
<p>The code reads the <code>--path</code> variable, converts it into a point array, and then draws a polygon using <code>moveTo</code> and <code>lineTo</code>. This polygon mirrors the <code>clip-path</code> polygon.  The stroke creates the border; the shape's fill is transparent.</p>
<p>Modifying the path and thickness allows for diverse polygon borders.  Gradients and images can replace solid colors due to the use of the CSS <code>background</code> property.</p>
<p>To incorporate content, a pseudo-element is necessary to prevent clipping.  The mask property is moved to the pseudo-element, while <code>clip-path</code> remains on the main element.</p>
<h3>Frequently Asked Questions</h3>
<p>Several common questions regarding the provided script are addressed below.</p>
<h4>What is the <code>cc()</code> function?</h4>
<p>This function converts point coordinates (percentage or pixel values) into pixel values usable within the canvas element.</p>
<pre class="brush:php;toolbar:false">const cc = function(x,y) {
  var fx=0,fy=0;
  if (x.indexOf('%') > -1) {
    fx = (parseFloat(x)/100)*w;
  } else if(x.indexOf('px') > -1) {
    fx = parseFloat(x);
  }
  if (y.indexOf('%') > -1) {
     fy = (parseFloat(y)/100)*h;
  } else if(y.indexOf('px') > -1) {
    fy = parseFloat(y);
  }
  return [fx,fy];
}

Why use clip-path if the mask already clips?

Using only the mask leads to issues with stroke alignment and hoverable area. clip-path resolves these problems.

Why use @property with the border value?

@property registers the custom property, defining its type (in this case, <length></length>), enabling browser recognition and handling as a valid type, not just a string. This allows for various length units.

What about the --path variable?

The --path variable is handled as a string due to limitations in registering complex types with @property. The cc() function handles the string-to-pixel conversion.

Can we have a dashed border?

Yes, using ctx.setLineDash(). An additional variable controls the dash pattern.

Why not use @property for the dash variable?

While technically possible, retrieving the values within paint() proved problematic. For now, the --dash variable is treated as a string.

Practical Applications

Several use cases showcase the polygon border technique:

• Buttons: Create custom-shaped buttons with hover effects.
• Breadcrumbs: Simplify breadcrumb navigation.
• Card Reveal Animation: Animate border thickness for hover effects or reveal animations.
• Callouts & Speech Bubbles: Easily add borders to complex shapes.
• Animating Dashes: Create various dash animations using setLineDash() and lineDashOffset.

This article provides a comprehensive guide to creating polygon borders using the CSS Paint API, offering flexibility and efficiency in shape styling.

The above is the detailed content of Exploring the CSS Paint API: Polygon Border. For more information, please follow other related articles on the PHP Chinese website!