CSS Flag Icon

[mwdewitt]

After seeing what Chris Coyier could do with CSS, concerning shapes, I know there has got to be a way to do this. Basically, the image on the left is what I have right now, but what I want is to make it look like the image on the right (a flag, bookmark, or ribbon). If you want to see my website, go here. I hope someone can point me in the right direction. No pun intended. Thank you in advance!

[joshuanhibbert]

This reminds me of an experiment I did up a while ago: http://jsfiddle.net/sl1dr/S7grU/

[mwdewitt]

Thank you. I think I have a good start on it now! I will post back later with the finished product.

Edit: Okay, I got the ribbon finished, but it is pushing my blog post below it, where as it should be beside the ribbon. I have tried to mess around with some of the CSS attributes, but I can not seem to get it back beside the ribbon. How would I go about doing that? Thank you in advance!

[joshuanhibbert]

.ribbon {

float: left;

margin-right: 14px;

}

Also, @Senff’s method is great, but it doesn’t have the browser support that the triangle borders technique has (used in my example). If you need any help with that just let me know.

[mwdewitt]

Thank you muchly! It’s done! You can go see it here.

[Author]

Posts