Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create a Flag With CSS

DZone's Guide to

Create a Flag With CSS

Corner flags are a nice way of labeling an image to emphasize something is 'new', 'featured' or 'on offer'. Often these effects are done with images. This tutorial gives an example of how to achieve this using CSS and semantic HTML.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Corner flags are a nice way of labelling an image to emphasise something is 'new', 'featured' or 'on offer'. Often these effects are done with images. This tutorial gives an example of how to achieve this using CSS and semantic HTML.

Demo: Image flag

Example HTML

Our markup is straightforward and semantic. Requiring two elements: one for the corner flag and the other for the text.

<p><span>Popular</span></p>

The flag is positioned absolutely so just needs to be contained to achieve the correct results.

<article>
    <img src="bacon.jpg"/>
    <h2>Some title</h2>
    <p><span>New!</span></p>
</article>

Example Code

/**
 *   Flag component
 */

.flag {
    position: absolute;
    top: 0;
    left: 0;
}

/**
 * The traingle shape of the flag.
 * 1. The size of the triangle.
 */  
.flag:before { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 34px;     /* [1] */
}

/*
 * Rotate the text and position it.
 * 1. Put on the GPU to ensure the text is rendered correctly
 */
.flag-text {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg) translateZ(0);    /* [1] */
    transform: rotate(-45deg) translateZ(0);
    color: #FFF;
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 1;
    font-size: 12px;
    text-transform: uppercase;
    width: 50px;
    text-align: center;
}

/*
 * Modifier classes for different colour flags
 */
.flag.is-new:before {
    border-color: rgba(4,120,0,.9) transparent transparent rgba(4,120,0,.9);
}

.flag.is-popular:before {
    border-color: rgba(206,3,5,.7) transparent transparent rgba(206,3,5,.7);
}

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
image ,css ,markup ,flags ,html ,example

Published at DZone with permission of Colin Bacon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}