It’s uncertain when the design motif originated - perhaps with the original 1980’s Battlestar Galactica TV series - but there’s something about clipped corners that screams “high tech” to viewers. Unfortunately, creating that appearance has been rather difficult in web design. Lea Verou outlined some clever ways to achieve clipped corners in her recent CSS Secrets book, but I thought up a few alternatives:

Why Not Use Background Images?

An instinctual reaction to this design goal might be to use background-image. Unfortunately, there are a few problems with that approach:

• size and resolution are obviously factors, unless you use SVG.
• whatever you do with it, the effect will almost certainly stretch in odd ways as the viewport is resized.
• it’s difficult to get a truly transparent clipped corner while making the rest of the element solid.

SVG, coupled with border-image, addresses all of those limitations.

Braced Corners

The first example shows not clipped, but “braced” corners. This is achieved by using a primitive SVG polyline, duplicated three times:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <polyline points="0,3 0,0 3,0" id="brace" fill="none" stroke="#fff" />
    <use xlink:href="#brace" transform="rotate(90, 5, 5)" />
    <use xlink:href="#brace" transform="rotate(180, 5, 5)" />
    <use xlink:href="#brace" transform="rotate(270, 5, 5)" />
</svg>

The SVG viewport is a 10 × 10 unit box, and the SVG is sized to 100px × 100px.

This SVG is applied to a container element as a border-image; in this case, that element is a <div> with an id of braced-corners:

* { box-sizing: border-box; }
#braced-corners { 
    border-image: url(brace.svg) 50 50; 
    background-color: rgba(255,255,255,0.3);
    border-style: inset;
    border-width: 30px;
    transition: .8s;
}

A few notes:

• unlike bitmaps, when border-image uses an SVG the units following the URL are interpreted as percentages, not pixels
• in this case, the 50 50 implies that the SVG is divided into even quadrants, with the “cut lines” at 50% and 50% slicing through the exact center of the element vertically and horizontally.
• Firefox insists on a border-style being present in the declaration, even though the inset effect will not be visible.
• the border-width determines the “extent” of the bracing; increasing it will “push” the content deeper into its container while making the braces larger.
• transition isn’t necessary at this point, but will be used in a moment.

We can also use SVG to create a grid background for the container as a separate file, which I’ll call grid.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <g stroke="rgba(255,255,255,0.1)">
    <line x1="0" y1="0" x2="10" y2="0" />
    <line x1="0" y1="0" x2="0" y2="10" />
  </g>
</svg>

In this case, the grid is made up of almost completely transparent white lines. Applied to the same container element in CSS:

#braced-corners { 
    background-image: url(grid.svg);
    padding: 0 2% 0 2%;
    background-size: 3%;
}

Interestingly, we can transition both on hover to provide a “focus” effect, which you can see in the example above:

#braced-corners:hover {
  border-image: url(brace.svg) 25 25; 
  background-size: 2%;
}

Clipped Corner

The original clipped corner effect takes a similar approach. First, the basic shape is created as a file named clipped-corner.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" 
width="500px" height="500px">
    <polyline points="0,1 1,0 10,0 10,10 0,10" fill="rgba(255,255,255,0.3)" stroke="none" />
</svg>

Visually, the SVG looks like this (filled with black for visibility):

It’s then applied to the container element:

#clipped-corners {
    border-image: url(clipped-corner.svg) 50 50 repeat repeat; 
    border-style: outset;
    border-width: 25px;
}

There’s just one problem: true to its name, the border-image takes care of the border of the element, not it’s interior, creating a result that looks like this:

This presents something of a quandary: we can’t use background-color to fill the space, as that will also flood the cut-off corner. I hit on the idea of using an inset box-shadow with the same color as the SVG border-image:

#clipped-corners {
    box-shadow: inset rgba(255,255,255,0.3) 0 0 0 250px;
}

Using an appropriate amount of spread with no blur, this fills the center of the container without affecting the corners. The background-image of the grid can then be applied as normal: the cut-off corner will always appear as a 45° angle, even as the elements are resized.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/wKGWNK