23 Aug 2015

Overlay a featured flag using pure CSS

This is a usefull method for creating a featured flag overlayed on top of an image or content. The flag uses the CSS transform property, and is anchored to the left corner so that it remains in the same position on all screen sizes.

Featured Flag using CSS transform with rotate

The HTML:

<span class="featured">
<span class="flag"> Featured </span>
</span>

The CSS:

span.flag {
background: #ff842c none repeat scroll 0 0;
color: #fff;
display: block;
font-weight: bold;
left: -45px;
padding: 10px 0;
position: relative;
text-align: center;
text-transform: uppercase;
top: 95px;
transform: rotate(-45deg);
transform-origin: left top 0;
width: 200px;
}

Check this JSfiddle example