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(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- java 注解的几大作用及使用方法详解
初学者可以这样理解注解:想像代码具有生命,注解就是对于代码中某些鲜活个体的贴上去的一张标签.简化来讲,注解如同一张标签. 在未开始学习任何注解具体语法而言,你可以把注解看成一张标签.这有助于你快速地理 ...
- shell脚本 mysql-binlog分析
一.简介 介绍 分析binlog工具,现有功能: 基于业务表分析统计各个表的dml的次数. 各个业务表的最后访问时间. 各dml总的次数. 该binlog的事务总数. 基于业务表的binlog to ...
- Log4j2再发新版本2.16.0,完全删除Message Lookups的支持,加固漏洞防御
昨天,Apache Log4j 团队再次发布了新版本:2.16.0! 2.16.0 更新内容 默认禁用JNDI的访问,用户需要通过配置log4j2.enableJndi参数开启 默认允许协议限制为:j ...
- [BUUCTF]PWN——ciscn_2019_n_3
ciscn_2019_n_3 附件 步骤 例行检查,32位,开启了nx和canary保护 本地试运行一下,经典的堆题的菜单 3.32位ida载入 new(),申请了两个chunk,第一个chunk(1 ...
- Python写业务逻辑的几个编码原则
作为一个写业务逻辑的boy,我需要专注的就是把业务逻辑写好.写业务逻辑并不复杂,就是把编程最基础的东西使用好,有变量.循环.流程控制.函数.数据库等. 但是写出的逻辑要通俗易懂.易于理解,避免炫技.晦 ...
- CF760A Petr and a calendar 题解
Content 输入两个数 \(m,d\),请输出 \(2017\) 年 \(m\) 月的日历[其中第一天是星期 \(d\)(如果 \(d=7\) 就是星期天)]需要印的列数. 格式见题目所述. 数据 ...
- LuoguP7189 [COCI2007-2008#6] PARKING 题解
Content 有 3 辆卡车,第 \(i\) 辆卡车停车开始时间为 \(l_i\),结束时间为 \(r_i\)(不包含).现在有以下收费方式: 停车辆数 每分钟每辆车单价 \(1\) \(a\) \ ...
- textarea标签换行符以br存入数据库 ,br转 textArea换行符
textArea换行符转 <br/> textarea标签回车符是/n,在html里识别回车是<br/>,在存入数据库之前要进行转换成<br/>,在取出展示在htm ...
- 『学了就忘』Linux日志管理 — 92、日志轮替
目录 1.日志文件的命名规则 2.logrotate配置文件说明 3.logrotate配置文件的主要参数 1.日志文件的命名规则 日志轮替最主要的作用就是把旧的日志文件移动并改名,同时建立新的空日志 ...
- Unhandled Exception: FormatException: Unexpected character
错误原因 json格式不正确,检查:是否加了注释.最后一个是否加了逗号... 正确格式 { "name": "shellon", "age" ...