Making a diamond ellipse with just CSS

Diamond ellipses are one of my favorite shapes. It’s a strong take on a square that’s a throwback to the shape of tube TV’s.

Diamond Ellipse

I recently tried using a SVG clip path to turn a Google Maps image into a diamond ellipse. It worked for the latest browsers, but fell apart on IE11. For the sake of progressive enhancement, I was OK with the map going square on IE11.

However, this SVG clip path lived on a bootstrap page that contained a checkbox button group and adding the SVG code made the button group disappear! With no time to debug the thousands of lines of bootstrap.css and .js, I sought another solution. What I came up with allowed me to bypass a large edit of the styles and opened up IE11 to the diamond ellipse. Score!

Score!

I used a fun CSS border-radius trick to draw the horizontal sides of the ellipse, then I stacked another div of the same image on top of the first with its vertical sides defined for the ellipse.

Building a diamond ellipse

The CSS property border-radius can bend a div’s side by throwing a slash into the specified radiuses, like so:

.map-A {
  border-radius: 80px/30px; /* horizontal radius/vertical radius */
}

The whole thing comes together like so:

See the Pen CSS diamond ellipse by Brent Enarson (@benarson) on CodePen.


Butabi bros

Ink stamp effect using CSS and fonts

I did something fun, quick, and (fairly) light today. The request was for some ink stamps that are going to go over images of bills on a webpage. Typically, I’d mock up some stamps, reduce the alpha, and save to PNG. But since there were so many stamps (5 at this time, more to come), I wrote them up in CSS. This first version was very lightweight. I used a font that was already on the site, then used all sorts of CSS to produce stamp ink. I took advantage of opacity, transform: rotate, and filter: blur.
Pure CSS ink stamps

Pure CSS ink stamps

Then the request came back for a grungy font. That’s easy to do with Adobe Typekit. What isn’t entirely easy to do is carry that grunge on through to the div’s border. I accomplished this by spinning up a single grungy PNG that utilized the border-image property. Yes, I dipped into images, but it’s one image for any combination of stamps, vs multiple custom images. Check out the source of the links for all of the markup.
Grunge ink stamps made of CSS

Grunge ink stamps made of CSS