Create a Picture corner label using CSS

The angle mark is a good way to indicate the emphasis of "New", "Popular" and so on for an element, which is often applied to pictures. The following is the use of CSS and HTML to achieve the image of the corner effect. creates two elements, one for creating a corner label, and one for text within a corner label.

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

　　

The angle mark must use absolute position to realize the effect correctly.

<article>        

　　

Full CSS 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 tra Nsparent Rgba (4,120,0,.9);}. Flag.is-popular:before {Border-coloR:rgba (206,3,5,.7) Transparent transparent RGBA (206,3,5,.7);} 

　　

Note: This article is a translation.

Original link: https://dzone.com/articles/create-a-flag-with-css

Original Author Demo link: http://demo.iambacon.co.uk/css-corner-flag

Create a Picture corner label using CSS