使用CSS創建圖片角標

角標是一個給某元素標明“New”,"Popular"等以表示強調的好方法，常應用於圖片。

下面就利用CSS和HTML實現了圖片的角標效果。

 

創建兩個元素，一個用於創建角標，一個用於角標內的文本。

 

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

　　

 角標必須用絕對定位才能正確實現效果。

 

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

　　

完整CSS代碼：

 

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

　　

注：本文為譯文。

原文鏈接：https://dzone.com/articles/create-a-flag-with-css

原作者demo鏈接：http://demo.iambacon.co.uk/css-corner-flag