CSS3之尖角標籤，css3尖角

CSS3之尖角標籤，css3尖角

,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單位.

簡單實現效果看: