CSS Shapes

One of the other issues I've encountered while looking at the flags is that sometimes you need several packages to produce diferent shaped flags. Sometimes people need a square, sometimes a circle or maybe they wish something more eccentric.

Be is as it may, SVG is very flexible with resizing. That said, maybe you need some specific shapes and I hope in this tutorial you get to use them.
For example purposes, we'll use the US, Indian, Spanish and Papuan flags. Normally they look like this:


CSS Rounded Corners

As you can see, those are completely normal flags, resized to 160x120 pixels to see how well they scale :-). Now, let's add some flavor on the corners via CSS.

.corner{
	border-radius:0.375em; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	-webkit-border-radius:0.375em; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-moz-border-radius:0.375em; /* Firefox 1-3.6 */
}

Ain't it neat? Of course, you can change the border-radius to something else. But of course, this is one of the easy ones, let's start rolling the ball downhill.


CSS Circle

One of the most requested features is a round-shaped circle (could it be anything else?). This implies that we either curve the whole flag (quite hard if not night-on impossible) or we just use a little CSS to take a chunk out of the text-center

.circle {
	-webkit-clip-path: circle(42.25% at 50% 50%); /* Chrome,Safari */
	clip-path: circle(42.25% at 50% 50%); /* Firefox 54+ (2017-06-13 and on) */
	/* No IE/Edge/Firefox<54 support: http://caniuse.com/#feat=css-clip-path */
}

It is one of those nifty beautiful features. The downside? Well, if you can see the distance between the flags, it is the same as before. This means, you cannot put them right new to each other via CSS. Just be aware of that, although you can always position things with position:absolute and get on with it.


CSS Square

.square {
    -webkit-clip-path: polygon(12.5% 0%, 87.5% 0%, 87.5% 100%, 12.5% 100%);
    clip-path: polygon(12.5% 0%, 87.5% 0%, 87.5% 100%, 12.5% 100%);
}

CSS Inverted Triangle

.triangle {
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

CSS Rectangle Marker

.markerrect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 60% 90%, 50% 100%, 40% 90%, 0 90%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 60% 90%, 50% 100%, 40% 90%, 0 90%);
}

CSS Square Marker

.markersqua {
    -webkit-clip-path: polygon(12.5% 0, 87.5% 0, 87.5% 90%, 60% 90%, 50% 100%, 40% 90%, 12.5% 90%);
    clip-path: polygon(12.5% 0, 87.5% 0, 87.5% 90%, 60% 90%, 50% 100%, 40% 90%, 12.5% 90%);
}

CSS Rombus

.rombus {
    -webkit-clip-path: polygon(50% 0%, 87.5% 50%, 50% 100%, 12.5% 50%);
    clip-path: polygon(50% 0%, 87% 49%, 50% 100%, 12% 50%);
}

CSS Hexagon

.hexagon {
    -webkit-clip-path: polygon(50% 12.5%, 100% 25%, 100% 75%, 50% 100%, 12.5% 75%, 12.5% 25%);
    clip-path: polygon(50% 0%, 87.5% 25%, 87.5% 75%, 50% 100%, 12.5% 75%, 12.5% 25%);
}

Limitations & Conclusions

One big limitation is the fact that you can-not-ever draw a border around the shapes via CSS. There are workarounds, but it involves more work than the trouble is worth for. I think it is pretty cool as it is :-).
The other limitation is that you actually are "cutting up" the image, so the flexibility is not that high. In the future I will show you how to resize and reshape these flags into something else, but this will have to do for now.

This is just the tip of the iceberg, you could come up with a lightning bolt shape and it would be cool, you could make irregular forms and whatever your mind comes up with. I recommend that you dive into EnjoyCSS, Clippy and CSS Portal to see more posibilities.

Benji Frugoni


If you liked this tutorial and want more, consider becoming my Patreon :-)


Download full demo


Full CSS (wf.css)

/* =========================
    CLASSES & TYPES
========================= */
.tut{
width:160px;
height:120px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* =========================
          SHAPES
========================= */
.corner{border-radius:0.375em; -webkit-border-radius:0.375em; -moz-border-radius:0.375em;}
.circle{-webkit-clip-path:circle(42.25% at 50% 50%);
clip-path:circle(42.25% at 50% 50%);}
.square{-webkit-clip-path:polygon(12.5% 0%,87.5% 0%,87.5% 100%,12.5% 100%);
clip-path:polygon(12.5% 0%,87.5% 0%,87.5% 100%,12.5% 100%);}
.triangle{-webkit-clip-path: polygon(50% 100%,0 0,100% 0);
clip-path: polygon(50% 100%,0 0,100% 0);}
.markerrect{-webkit-clip-path: polygon(0% 0%,100% 0%,100% 90%,60% 90%,50% 100%,40% 90%,0 90%);
clip-path: polygon(0% 0%,100% 0%,100% 90%,60% 90%,50% 100%,40% 90%,0 90%);}
.markersqua{-webkit-clip-path: polygon(12.5% 0,87.5% 0,87.5% 90%,60% 90%,50% 100%,40% 90%,12.5% 90%);
clip-path: polygon(12.5% 0,87.5% 0,87.5% 90%,60% 90%,50% 100%,40% 90%,12.5% 90%);}
.rombus{-webkit-clip-path: polygon(50% 0%,87.5% 50%,50% 100%,12.5% 50%);
clip-path: polygon(50% 0%,87% 49%,50% 100%,12% 50%);}
.hexagon{-webkit-clip-path: polygon(50% 12.5%,100% 25%,100% 75%,50% 100%,12.5% 75%,12.5% 25%);
clip-path: polygon(50% 0%,87.5% 25%,87.5% 75%,50% 100%,12.5% 75%,12.5% 25%);}

Full HTML (index.htm)

<html>
<head>
<title>WonderFlags.Pro Demo</title>
<link rel="stylesheet" href="wf.css" />
</head>
<body>
<img src="img/us/us-national.svg" class="tut"/>
<img src="img/in/in-national.svg" class="tut"/>
<img src="img/es/es-national.svg" class="tut"/>
<img src="img/pg/pg-national.svg" class="tut"/>
<br />
<img src="img/us/us-national.svg" class="tut1 corner"/>
<img src="img/in/in-national.svg" class="tut1 corner"/>
<img src="img/es/es-national.svg" class="tut1 corner"/>
<img src="img/pg/pg-national.svg" class="tut1 corner"/>
<br />
<img src="img/us/us-national.svg" class="tut1 circle"/>
<img src="img/in/in-national.svg" class="tut1 circle"/>
<img src="img/es/es-national.svg" class="tut1 circle"/>
<img src="img/pg/pg-national.svg" class="tut1 circle"/>
<br />
<img src="img/us/us-national.svg" class="tut1 square"/>
<img src="img/in/in-national.svg" class="tut1 square"/>
<img src="img/es/es-national.svg" class="tut1 square"/>
<img src="img/pg/pg-national.svg" class="tut1 square"/>
<br />
<img src="img/us/us-national.svg" class="tut1 triangle"/>
<img src="img/in/in-national.svg" class="tut1 triangle"/>
<img src="img/es/es-national.svg" class="tut1 triangle"/>
<img src="img/pg/pg-national.svg" class="tut1 triangle"/>
<br />
<img src="img/us/us-national.svg" class="tut1 markerrect"/>
<img src="img/in/in-national.svg" class="tut1 markerrect"/>
<img src="img/es/es-national.svg" class="tut1 markerrect"/>
<img src="img/pg/pg-national.svg" class="tut1 markerrect"/>
<br />
<img src="img/us/us-national.svg" class="tut1 markersqua"/>
<img src="img/in/in-national.svg" class="tut1 markersqua"/>
<img src="img/es/es-national.svg" class="tut1 markersqua"/>
<img src="img/pg/pg-national.svg" class="tut1 markersqua"/>
<br />
<img src="img/us/us-national.svg" class="tut1 rombus"/>
<img src="img/in/in-national.svg" class="tut1 rombus"/>
<img src="img/es/es-national.svg" class="tut1 rombus"/>
<img src="img/pg/pg-national.svg" class="tut1 rombus"/>
<br />
<img src="img/us/us-national.svg" class="tut1 hexagon"/>
<img src="img/in/in-national.svg" class="tut1 hexagon"/>
<img src="img/es/es-national.svg" class="tut1 hexagon"/>
<img src="img/pg/pg-national.svg" class="tut1 hexagon"/>
</body>
</html>