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画叉叉(一般用于关闭按钮)的更多相关文章

  1. amazeui学习笔记--css(常用组件4)--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  2. 去掉IE11的叉叉

    在 IE11 下,浏览器自作多情在 text input 组件上加一个 close 叉叉: 用CSS伪类定义: input::-ms-clear { display: none; }

  3. IE input X 去掉文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本对于type="password&q ...

  4. IE8 input X 去掉文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本 对于type="password& ...

  5. IE input X 去掉文本框的叉叉和password输入框的眼睛图标

    IE input X 去掉文本框的叉叉和password输入框的眼睛图标 从IE 10開始,type="text" 的 input 在用户输入内容后.会自己主动产生一个小叉叉(X) ...

  6. html 输入框显示“小叉叉”的清空方法

    在IE10以下,我们的输入框input会出现小叉叉.怎么解决这个问题呢? 针对input框我们做一个处理 <style type="text/css"> input:: ...

  7. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  8. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  9. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  10. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

随机推荐

  1. Mysql一致性效验_pt工具

    目录 一.简介 二.原理介绍 三.选项 四.环境 五.部署 一.简介 pt工具可以随机抽取主从的数据进行对比,用于测试主从数据一致性.也可以对不一致数据进行修复.这个工具在主或者从上安装均可 二.原理 ...

  2. HCNP Routing&Switching之组播技术-组播协议IGMP

    前文我们了解了组播地址相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15616740.html:今天我们来聊一聊组播协议中IGMP协议相关话题: 组播 ...

  3. [BUUCTF]PWN11——get_started_3dsctf_2016

    [BUUCTF]PWN11--get_started_3dsctf_2016 题目网址:https://buuoj.cn/challenges#get_started_3dsctf_2016 步骤: ...

  4. Spring事务什么时候会失效?

    面试官:Spring事务什么时候会失效? 应聘者: 访问权限问题 方法用final修饰 未被Spring管理 错误的传播特性 自己吞了异常 手动抛了别的异常 自定义了回滚异常 方法内部调用 1.访问权 ...

  5. java数据类型:集合存储元素类型限制<泛型> ;自定义类指定泛型<T> 以及限制用法;派生子类泛型<T> super(泛型内参数); 泛型通配符?以及?限制用法

    问题背景 Java 集合有个缺点,把一个对象"丢进"集合里之后,集合就会"忘记"这个对象的数据类型,当再次取出该对象时 该对象的编译类型就变Object类型(其 ...

  6. C++ 智能指针(shared_ptr/weak_ptr)原理分析

    其主要的类关系如下所示(省略相关的类模板参数): 图1 从上面的类图可以清楚的看出shared_ptr内部含有一个指向被管理对象(managed object)T的指针以及一个__shared_cou ...

  7. python 豆瓣top250

    豆瓣电影 import re import requests headers={"User-Agent": "Mozilla/5.0 (Windows NT 10.0; ...

  8. JAVA中Map集合遍历

    for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println("key= " ...

  9. JAVA将一个pdf按页码拆分成多个pdf

    引入maven <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf< ...

  10. FastAPI(六十五)实战开发《在线课程学习系统》基础架构的搭建

    在之前三篇,我们分享的就是需求的分析,基本接口的整理,数据库链接的配置.这次我们分享项目的基本框架,目录结构如下: common目录 通用的目录,一些通用的处理放在这里 models目录 数据库相关的 ...