需求场景
当前端页面需要展示皮肤是否在使用, 书籍是否阅读中, 文件是否下载完成时, 这时最直接的效果就是在盒子 (div) 左 / 右上角显示相应标签, 不仅美观且实用.
这里以制作图片右上角标签为例, 用 CSS 以最简单, 直接的方式实现效果.
实现效果
实现效果
实现思路
准备两个 div(一个父容器, 一个标签 div), 分别设置宽高, 并设置相对布局.
使标签 div 居于父容器右上角, 设置内容居中显示, 设置背景和字体颜色, 旋转该 div.
将父容器设置 overflow: hidden, 实现父容器对标签 div 超出部分的遮挡, 即实现了标签效果.
结构展示
结构展示
代码示例
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 实现标签效果
- </title>
- <style>
- /* 外层 div 设为 relative 设置 overflow: hidden 实现对超出部分的 遮挡效果 */ .img-box {
- width: 200px; height: 400px; margin: 40px; overflow: hidden; position:
- relative; } /* 外层 div 设为 absolute, 加以 top,right 等属性调整标签位置 设置 height,line-height,text-align
- 控制标签内容水平垂直居中 设置 transform, 旋转标签 45 度 */ .tag { width: 140px; height: 25px;
- top: 16px; right: -40px; text-align: center; line-height: 25px; transform:
- rotate(45deg); position: absolute; color: white; background: #4188ab; }
- /* 图片展示 设为 block */ .img { display: block; width: 200px; height: 400px;
- }
- </style>
- </head>
- <body>
- <div class="img-box">
- <div class="tag">
- 正在使用
- </div>
- <img class="img" src="..." />
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/184eb02f9b98