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(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- h5文件下载
// type1 await getFile(fileUrl).then((res) => { console.log('download',res); let bFile = window.U ...
- LuoguP7071 [CSP-J2020] 优秀的拆分 题解
Content 给定一个数 \(n\),求是否能够拆分成 \(2\) 的正整数次幂的和的形式,并给出具体方案. 数据范围:\(1\leqslant n\leqslant 10^7\). Solutio ...
- SpringBoot项目 maven打包时候提示程序包xxx不存在
A模块依赖B模块 A打包的时候会报程序包xxx不存在 这时候我们看下B模块的pom.xml文件是否加了 <build> <plugins> <plugin> < ...
- JAVA微信公众号网页开发——通过接收人的openid发送模板消息
TemplateData.java 1 package com.weixin.weixin.template; 2 3 public class TemplateData { 4 private St ...
- htmlunit设置只采集html,取消对css,javascript支持
引入htmlunit依赖 <!-- https://mvnrepository.com/artifact/net.sourceforge.htmlunit/htmlunit --> < ...
- Intellij IDEA添加插件
1. Lombok插件 IDEA增加对Lombok的支持 <!--lombok插件--> <dependency> <groupId>org.projectlomb ...
- HDZ城市行深圳站|AIoT时代,如何抓住智联生活的战略机会点?
摘要:2021年12月24日,HDZ城市行深圳站:AIoT引爆全场景应用新机会(智联生活专场)圆满落幕. 2021年12月24日,HDZ城市行深圳站:AIoT引爆全场景应用新机会(智联生活专场)圆满落 ...
- 【LeetCode】1110. Delete Nodes And Return Forest 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...
- 【LeetCode】984. String Without AAA or BBB 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字符串构造 日期 题目地址:https://leet ...
- 【LeetCode】501. Find Mode in Binary Search Tree 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...