首頁  >  文章  >  web前端  >  CSS3之尖角标签_html/css_WEB-ITnose

CSS3之尖角标签_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:48:521421瀏覽

如图所示,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单位.

简单实现效果看截图:

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn