文章出處
文章列表
如圖所示,Tag標簽的制作通常使用背景圖片,現在用CSS3代碼就能實現尖角效果(需瀏覽器支持CSS3屬性).
運用CSS3樣式實現尖角標簽,只需要寫簡單的HTML結構和CSS樣式.
<p> <a>Tag1</a> <a>Tag2</a> <a>Tag3</a> <a>Tag4</a> </p>
css主要利用偽元素來實現尖角
a{ dispaly:inline-block; position:relative; background:#ccc; color:green; line-height:1em; margin:0 10px; padding:3px; } a:before{ position:absolute; content:""; width:0; height:0; border:transparent 0.74em solid; border-right-color:#ccc; top:0; left:-1.4em }
利用偽元素實現的尖角基于整個a標簽絕對定位顯示在左側,注意行高和定位都是用的em單位.
簡單實現效果看截圖:
文章列表
全站熱搜
留言列表
