使用CSS创建一个图片角标

Posted 2020-08-06

角标是一个给某元素标明“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