html给图标加角标,HTML+CSS入门 如何使用CSS创建一个图片角标

本篇教程介绍了HTML+CSS入门 如何使用CSS创建一个图片角标，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

角标是一个给某元素标明“New”,"Popular"等以表示强调的好方法，常应用于图片。

下面就利用CSS和HTML实现了图片的角标效果。

创建两个元素，一个用于创建角标，一个用于角标内的文本。

Popular

角标必须用绝对定位才能正确实现效果。

    

Some title

New!

完整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);

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！