html flag属性,纯CSS实现文章左上角Flag标签
先来张预览图
HTML部分
首先，需要一个父div：Flag所在容器。由于本例是使用绝对定位的方式实现，所以这个父div的定位方式不能使static。
其次，需要一个块级(div即可)元素：Flag。
就这两个元素即可。
CSS部分
首先，父容器需具有一定宽高，且定位不能是静态的，然后它需要设置溢出元素隐藏。.article {
width: 700px;
height: 200px;
position: relative;
overflow: hidden;
}
其次，子元素需要根据父容器的尺寸进行定位和大小的调整。.article .flag {
position: absolute; /*绝对定位*/
height: 20px;
line-height: 20px;
text-align: center;
width: 74px;
background-color: #FF5722;
color: #fff;
}
最总要的一点是，需要利用CSS3的transform来旋转Flag。.article .flag-left {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: -18px;
top: 9px;
}
这里.flag-left的旋转是-45度，如果Flag放在右边，则可以进行相应修改。.article .flag-right {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -18px;
top: 9px;
}
最后说明，flag的width、height、line-height以及left、top、right等样式需要根据需要自己衡量。
html flag属性,纯CSS实现文章左上角Flag标签相关推荐
- 纯css实现给图片加标签
纯css实现给图片加标签 原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
- html 头尾代码自动,HTML Head Generator - 纯 CSS 实现的头部元标签代码生成器 - 钉子の次元...
前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦.没有到用一行 JavaSc ...
- CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
CSS 中的 scroll-behavior 属性是一个非常新的属性.定义要求 scroll-behavior(尤其是在选择锚链接时)具有平滑的过渡动画外观,而不是默认的.更刺眼的即时跳转. html ...
- css 图标点击变色,纯CSS实现小图标变色的一些研究
by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...
- 透彻解析Unity Camera的Clear Flag属性
最近在学习unity渲染的立方体纹理时,对Camera的Clear Flag属性产生了疑惑.Clear Flag有四个可以设置的选项,分别是:Skybox.Solid Color.Depth Only ...
- 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
- 有意思：textarea resize属性下纯CSS交互效果
一.众所周知的 众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志. 有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做 ...
- html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单 以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
- html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
导航下拉,大家首先想到的是用JS来做.或许是大家看到的下拉菜单演示,多是JS控制的下拉,导致从先入为主的意识上,误以为二级下拉是很难的东西,必须要会Javascript才能做. 其实,一个简答的下拉效 ...
- 一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素.:checked伪类.::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Swit ...
最新文章
- 实现BFS之“营救”
- vi在一般指令模式下几个实用的命令
- jQuery init debug
- datetime unix php,PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】...
- 软考网络工程师笔记-综合知识2
- 我的docker随笔16：构建一个特定的nodejs镜像
- Hbase安装及配置
- SDWebImage下载和缓存图片（UIImge）
- android 计时器 开始 停止 继续和暂停
- 用js实现建议绘图板
- 箩筐火车免费wifi v4.3.0
- JS 拖拽对齐参考线+自动吸附+对齐到网格
- MATLAB/OpenCV--基于棋盘格相机标定教程
- Redis管道技术的使用
- 多元函数带 Peano余项的Taylor公式的推广 （原创）
- matlab永磁电机模型,采用MATLAB/Simulink对永磁同步电机进行模型仿真和调速研究
- 涂鸦智能设备接入homeassistant
- 手握N段大厂实习经历的人生有多爽？
- 用C语言开发NES游戏（CC65）21、完成一个游戏
- 创建线程的第三种方法-callable futureTask