CSS Figures

Let's play around!

One of those difficult things in life is to get the shapes you want in the place you want, cross-browser and without a hitch. Well, I got the same problem, xD. But let's take a look at things we can potentially do with the power of CSS+SVG with the flags we got in our power.

We're gonna play with Chile, Egypt, China and Canada this time around.

     

Flag poles, take 1

I must say this is harder than it looks. At least it required a lot of playing around with the numbers of the flag until I got it right. I am using a rectangle flag pole image (640x480 original) I generated and stack the images with CSS.

HTML

<div class="row">
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole1.svg" />
  <img class="tut3image2" src="/img/cl/cl-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole1.svg" />
  <img class="tut3image2" src="/img/eg/eg-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole1.svg" />
  <img class="tut3image2" src="/img/cn/cn-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole1.svg" />
  <img class="tut3image2" src="/img/ca/ca-national.svg" />
 </div>
</div>

CSS

.tut3{ width:128px; height:96px; background-size: contain; background-repeat: no-repeat; }
.tut3parent { position: relative; top: 0; left: 0; }
.tut3image1 { position: relative; top: 0; left: 0; width:128px; height:96px; }
.tut3image2 { position: absolute; top: 5px; left: 22px; width:86px; height:66px; }

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewbox="0 0 640 480">
  <path fill="#fff" d="M0 0h640v480H0z"/>
  <polygon points="100,25 540,25 540,355 100,355" stroke="black" stroke-width="4" fill="transparent"/>
  <line x1="100" y1="15" x2="100" y2="480" stroke="black" stroke-linecap="round" stroke-width="20"/>
</svg>

Flag poles, take 2

Have you read my tutorial about CSS Shapes? Well, it actually contains part of the information I want to show here. We're gonna "shape" the SVG flag into the new triangular pole. More playing with numbers, yay!

HTML

<div class="row">
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole2.svg" />
  <img class="tut3triangle" src="/img/cl/cl-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole2.svg" />
  <img class="tut3triangle" src="/img/eg/eg-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole2.svg" />
  <img class="tut3triangle" src="/img/cn/cn-national.svg" />
 </div>
 <div class="tut3parent">
  <img class="tut3image1" src="/tutorials/img/pole2.svg" />
  <img class="tut3triangle" src="/img/ca/ca-national.svg" />
 </div>
</div>

CSS

.tut3{ width:128px; height:96px; background-size: contain; background-repeat: no-repeat; }
.tut3parent { position: relative; top: 0; left: 0; }
.tut3image1 { position: relative; top: 0; left: 0; width:128px; height:96px; }
.tut3triangle { position: absolute; -webkit-clip-path: polygon(0 0,100% 50%,0 100%);clip-path: polygon(0 0,100% 50%,0 100%); top: 5px; left: 22px; width:86px; height:66px; }

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewbox="0 0 640 480">
  <path fill="#fff" d="M0 0h640v480H0z"/>
  <polygon points="100,20 545,190 100,360" stroke="black" stroke-width="4" fill="transparent"/>
  <line x1="100" y1="15" x2="100" y2="480" stroke="black" stroke-linecap="round" stroke-width="20"/>
</svg>

Well, this tutorial has been shorter because I wanted to illustrate this idea in a simple way. You can go around and goof with any SVG shapes and fit the flag (or whatever) inside it with some fancy CSS shapes. However, you can get frustrated really quickly if you have to save those images or recall them on a new page without the correct styles. I hope you can use it in a constructive non-consuming manner :-).

Benji Frugoni


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


Download full demo