html如何给图标加角标

小编给大家分享一下html如何给图标加角标，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10余年专注成都网站制作，企业网站制作，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站制作,高端网页制作,对成都葡萄架等多个领域，拥有丰富建站经验。

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

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

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

Popular

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

New!

完整CSS代码：

.flag?{

position:?absolute;

top:?0;

left:?0;

}

.flag:before?{

content:?"";

position:?absolute;

top:?0;

left:?0;

border-style:?solid;

border-width:?34px;?

}

.flag-text?{

-moz-transform:?rotate(-45deg);

-ms-transform:?rotate(-45deg);

-o-transform:?rotate(-45deg);

-webkit-transform:?rotate(-45deg)?translateZ(0);

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;

}

.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);

}

以上是“html如何给图标加角标”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！