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.

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!

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.

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.

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. 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.