首页 > 代码库 > 使用CSS创建一个图片角标
使用CSS创建一个图片角标
角标是一个给某元素标明“New”,"Popular"等以表示强调的好方法，常应用于图片。
下面就利用CSS和HTML实现了图片的角标效果。
创建两个元素，一个用于创建角标，一个用于角标内的文本。
<p><span>Popular</span></p>
角标必须用绝对定位才能正确实现效果。
<article> <img src="http://www.mamicode.com/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
使用CSS创建一个图片角标
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。