Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • Android
  • 微信公众号
  • 框架
  • Mysql
  • PHP
  • Python
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

立志于全桟开发
首页
  • Html5
  • Javascript
  • Nodejs
  • Android
  • 微信公众号
  • 框架
  • Mysql
  • PHP
  • Python
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 使用纯CSS实现大于号小于号关闭X样式
  • 文本溢出单行&多行溢出显示省略号
  • Css修改滚动条样式
  • Css文字两端对齐
  • css实现瀑布流
  • 实用的CSS
  • 《常用CSS》
mrcdh
2020-10-22

使用纯CSS实现大于号小于号关闭X样式

实现原理: 设置元素的边框线和旋转元素。

.gt{    //大于号>
  width: 10px;
  height: 10px;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  transform: translate(0,-50%) rotate(-135deg);
}
.lt{    //小于号<
  width: 10px;
  height: 10px;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  transform: translate(0,-50%) rotate(45deg);
}
.close{ //关闭按钮x
  position:relative;
  width:1px;
  height:15px;
  background: red;
  transform: rotate(45deg);
  display: inline-block;
}
.close:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:1px;
  height:15px;
  background: red;
  transform: rotate(270deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="gt"></div>
1
<div class="lt"></div>
1
<div class="lt"></div>
1
#css
上次更新: 2020/10/23, 14:10:00
文本溢出单行&多行溢出显示省略号

文本溢出单行&多行溢出显示省略号→

最近更新
01
02.electron打包操作(electron-builder)
06-22
02
servlet基础
06-15
03
maven tomcat插件
06-15
更多文章>
Theme by Vdoing | Copyright © 2020-2022 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式