使用CSS创建一个图片角标

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

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

/**
 *   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);
}