小編給大家分享一下html如何給圖標加角標，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10余年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站制作，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對成都葡萄架等多個領(lǐng)域，擁有豐富建站經(jīng)驗。

角標是一個給某元素標明“New”,"Popular"等以表示強調(diào)的好方法，常應(yīng)用于圖片。

下面就利用CSS和HTML實現(xiàn)了圖片的角標效果。

創(chuàng)建兩個元素，一個用于創(chuàng)建角標，一個用于角標內(nèi)的文本。

Popular

角標必須用絕對定位才能正確實現(xiàn)效果。

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如何給圖標加角標”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！