CSS3之尖角标签_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:48:52
원래의
1430명이 탐색했습니다.

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

简单实现效果看截图:

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿