I couldn’t find a shield shape written in pure CSS that would scale up and down to any size easily, so I decided to create one and i’ll share it with you. The reason i wanted a css solution and didn’t use a font icon was because i wanted to place something inside the shield… i could have just used a font icon to get the shield shape but placing a font icon within a font icon is a bit messy, plus i figured it’d require more code to get displaying reasonably well…
There are CSS shield shapes out there and I based my solution on this CSS shield: http://jsfiddle.net/isherwood/2v2wM. No point in reinventing the wheel, as they say. The problem with this shape is that it’s put together using fixed sizes which isn’t very practical for the responsive world we live in today.
So I converted everything in to percentages and made it fully responsive. The end result can be seen here: http://jsfiddle.net/seanmacentee/2v2wM/36/. All you gotta do is set the parent / container size and the shield will scale up and down to match.
This is more of a ‘classic’ shield shape… you could take it further but it’d require more work and if you’re looking for a responsive solution, you probably don’t want to make the shield too complex as detail will be lost at small sizes.