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(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- STL模板前言(1)
STL提供以下数据结构方便使用: 顺序容器: vector(动态数组):从后面直接插入删除元素,直接访问任何元素. deque(双端队列):从前面和后面快速插入删除,直接访问任何元素. list(双链 ...
- 月薪过2w的IT程序员都是怎么做到的?
先说结论:要月入过2万,不能仅仅靠技术,更要找个肯给到这份工资的平台.也就是说,尽量去大城市,尽量去大公司. 我在上海,先说下我知道的薪资情况,基本上,只要有3年开发经验,能过大厂或外企的面试, ...
- AOP——面向切面编程
目录 什么是AOP AOP的作用和优势 作用: 优势: AOP相关术语 AOP的实现方式 使用动态代理的方式 使用XML的方式 使用注解的方式 什么是AOP AOP:全称是Aspect Oriente ...
- java 数据类型String 【正则表达式】匹配
1,什么是正则表达式 正则表达式是用来处理字符串的,其实正则表达式是非常复杂的,专门去系统学习需要花很长的时间,我们课程主要就是把常用的基础的给大家讲解. 正则表达式可以用来干什么: (1),匹配字符 ...
- IDEA常用设置及插件
设置 1.设置打开后不直接进入项目 IDEA默认打开时会直接进入上次打开的目录,有的时候加载很长时间,但这个时候可能我们并不是要打开这个项目,这里有一个设置,在如图的位置,去掉勾选,即可设置打开后不直 ...
- c++ 之面试题(3)数组递归查找
题目描述 1. 给定严格升序(没有相等元素)的数组a,元素个数为cnt, 查找num在数组中的位置序号(以0位起始). 如果没找到则返回: 比num小且最靠近的元素位置序号. 若所有元素均大于num则 ...
- c++基础之operator =处理
1.注意自我赋值 先看个例子: class A {}; A a ; a = a; // 注意这句 可能实际中,你不会这样做,但是实际中,是有可能的,并且这样做,也不违背语法. BUT, 如果上面的例子 ...
- 【LeetCode】518. Coin Change 2 解题报告(Python)
[LeetCode]518. Coin Change 2 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目 ...
- 【LeetCode】885. Spiral Matrix III 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- .Net Core&Agile Config配置中心
当服务逐渐的增多,对各服务的配置管理愈加重要,轻量级的配置中心,入手或是搭建都简单许多,基于.net core开发的轻量级配置中心AgileConfig,功能强大,上手简单. https://gith ...