css 利用 border 模拟尖括号、三角、倒三角效果

时间：

分类：

css

字数：

456 字

时长：

大约需要 2 分钟

次数：

0 人阅读

在网页上经常看到各种各样的小图标，实现方式多种多样，字体图标，SVG，图片等。

当然能用 css 实现的效果，绝不使用其他方式。毕竟几行 css 绝对比 字体图标，图片文件要小得多，也比 SVG 渲染要快。

本文介绍常见的 三角效果 尖括号效果 使用 css 实现。

应用场景

示例：

example.html

源码：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css 实现三角形</title>
  <style type="text/css">
    a {
      position: relative;
      color: #F90;
      font-size: 24px;
      text-decoration: none;
      margin-top: 2px;
      z-index: 2;
    }

    i {
      height: 0;
      line-height: 0;
      font-size: 0;
      width: 0;
      border: 10px solid;
      border-color: transparent transparent transparent #F90;
      position: absolute;
      z-index: -1;
    }

    .a1 i:after {
      content: '';
      border: 10px solid;
      border-color: transparent transparent transparent #FFF;
      position: absolute;
      top: 50%;
      margin-top: -10px;
      left: -16px;
    }

    .a1 i,
    .a2 i {
      top: 50%;
      margin-top: -10px;
      right: -26px;
    }

    .a3 i {
      top: 50%;
      margin-top: -5px;
      right: -24px;
      border-color: #F90 transparent transparent transparent;
    }

    .a4 i {
      top: 50%;
      margin-top: -15px;
      right: -24px;
      border-color: transparent transparent #F90 transparent;
    }

    .a5 i {
      top: 50%;
      margin-top: -15px;
      right: -24px;
      border-color: transparent #F90 #F90 transparent;
      border-radius: 3px;
      transform: rotate(45deg);
    }
  </style>
</head>

<body>
  <p>
    <a href="javascript:;" class="a1">更多<i></i></a>
  </p>
  <p>
    <a href="javascript:;" class="a2">更多<i></i></a>
  </p>
  <p>
    <a href="javascript:;" class="a3">展开<i></i></a>
  </p>
  <p>
    <a href="javascript:;" class="a4">收起<i></i></a>
  </p>
  <p>
    <a href="javascript:;" class="a5">圆角<i></i></a>
  </p>
</body>

</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-12/css-angle-brackets/

如果您觉得文章不错，可以点击文章中的广告支持一下！