如下图所示, 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 单位.
简单实现效果看截图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17710.html