css画叉叉(一般用于关闭按钮)
css
一般用于右上角关闭弹窗
#pdclose {
width: 18px;
height: 18px;
cursor: pointer;
float: right;
position: relative;
overflow: hidden;
margin-top: 10px;
}
#pdclose:after {
width: 100%;
position: absolute;
height: 1.5px;
background: #fff;
content: "";
top: 9px;
left: 0;
transform: rotate(134deg);
-ms-transform: rotate(134deg);
-moz-transform: rotate(134deg);
-webkit-transform: rotate(134deg);
-o-transform: rotate(134deg);
}
#pdclose:before {
width: 100%;
position: absolute;
height: 1.5px;
background: #fff;
content: "";
top: 9px;
right: 0;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
html
<span id="pdclose"></span>
效果

css画叉叉(一般用于关闭按钮)的更多相关文章
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- 去掉IE11的叉叉
在 IE11 下,浏览器自作多情在 text input 组件上加一个 close 叉叉: 用CSS伪类定义: input::-ms-clear { display: none; }
- IE input X 去掉文本框的叉叉和密码输入框的眼睛图标
从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本对于type="password&q ...
- IE8 input X 去掉文本框的叉叉和密码输入框的眼睛图标
从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本 对于type="password& ...
- IE input X 去掉文本框的叉叉和password输入框的眼睛图标
IE input X 去掉文本框的叉叉和password输入框的眼睛图标 从IE 10開始,type="text" 的 input 在用户输入内容后.会自己主动产生一个小叉叉(X) ...
- html 输入框显示“小叉叉”的清空方法
在IE10以下,我们的输入框input会出现小叉叉.怎么解决这个问题呢? 针对input框我们做一个处理 <style type="text/css"> input:: ...
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- 安装Java1.8教程图解
在服务器上配置Java环境 第一步: 因为我们系统是centOS7 64位的,所以我下载的是最新版本的jdk X64位的 因为阿里云服务器事先就安装好了ssh,我们可以用xsell连上去,我把下载好的 ...
- CF1057B DDoS 题解
Content 有一个长度为 \(n\) 的数列 \(a_1,a_2,...,a_n\),求出满足 \(\sum\limits_{i=l}^r a_i>100\times(r-l+1)\) 的区 ...
- CF1437A Marketing Scheme 题解
Content 有 \(t\) 组询问,每组询问给定两个整数 \(l,r\),问是否存在一个 \(a\),使得 \(\forall x\in[l,r]\),都有 \(x\mod a\geqslant\ ...
- AT266 迷子のCDケース 题解
Content 有 \(n+1\) 个碟,编号为 \(0\sim n\),一开始 \(0\) 号碟在播放机上,其他的碟依次放进了 \(n\) 个盒子里面.现在有 \(m\) 次操作,每次操作找到当前在 ...
- LuoguP5238 整数校验器 题解
Content 给定两个整数 \(l,r\),再给定 \(T\) 个整数,请判断对于每个整数 \(x\),是否满足以下要求: \(x\in[l,r]\). \(x\) 格式合法. 数据范围:\(-2^ ...
- py常用标准库
functools python3中增加了更多工具函数,做业务开发时大多情况下用不到,记录一个比较常用的,给函数或者对象初始化参数 partial函数(偏函数) 把一个函数的某些参数设置默认值,返回一 ...
- AcWing09. 分组背包问题
有\(N\)组物品和一个容量是\(V\)的背包. 每组物品有若干个,同一组内的物品最多只能选一个. 每件物品的体积是\(v_{ij}\),价值是\(w_{ij}\),其中\(i\)是组号,\(j\)是 ...
- MFC之实现无边窗口移动
说明 演示环境: Vs2015 + MFC 基于对话框程序 效果图 方法1 注意: 此方法存在缺陷: 无法响应LButtonUp消息 添加消息处理函数 函数代码 void CMFCApplicatio ...
- Python obj与JSON相互转换
1 # _*_ coding:utf-8 _*_ 2 3 def showJson(self, pipefd): 4 overdict = args.__dict__ 5 # 此时就可以用json.d ...
- 【LeetCode】面试题 01.07. 旋转矩阵
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 两次翻转 日期 题目地址:https://leetco ...