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(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- Python测试框架pytest入门基础
Pytest简介 Pytest is a mature full-featured Python testing tool that helps you write better programs.T ...
- HDD深圳站:全生命周期赋能开发者,华为引领应用生态升级
12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...
- TMS570LS3137笔记-内部Flash FEE使用
1.基本简介 TMS570LS3137内部Flash分为三个 Bank,主Flash 数据存储区3MB,是Bank1和Bank2.还有一个Bank7是作为内部Flash模拟EEPROM使用.内部存储器 ...
- 字符串函数(Excel函数集团)
此处文章均为本妖原创,供下载.学习.探讨! 文章下载源是Office365国内版1Driver,如有链接问题请联系我. 请勿用于商业!谢谢 下载地址:https://officecommunity-m ...
- LuoguP7870 「Wdoi-4」兔已着陆 题解
Content 对一个栈执行如下操作: 1 l r:依次向栈里面弹入 \(l,l+1,\dots,r-1,r\). 2 k:依次从栈里面弹出 \(k\) 个数,并求出所有弹出的数的和. 数据范围:\( ...
- C++ 11 新特性: auto 和 decltype 区别和联系
一. auto简介编程时候常常需要把表达式的值付给变量,需要在声明变量的时候清楚的知道变量是什么类型.然而做到这一点并非那么容易(特别是模板中),有时候根本做不到.为了解决这个问题,C++11新标准就 ...
- 线程 TLS
TLS为什么产生呢?是软件开发中的什么问题呢? TLS 产生背景进程中的全局变量与函数内定义的静态(static)变量,是各个线程都可以访问的共享变量.在一个线程修改的内存内容,对所有线程都生效 ...
- 【LeetCode】面试题 17.16. 按摩师 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...
- 写在LeetCode刷题600题
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 从2015年9月刷题至今,我终于在LeetCode刷够600道题了.从刚开始的Java语 ...
- 【LeetCode】932. Beautiful Array 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 构造法 递归 相似题目 参考资料 日期 题目地址:h ...