使用纯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>

<div class="lt"></div>

<div class="lt"></div>

#css

上次更新: 2020/10/23, 14:10:00

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