【CSS】实现各类三角形

日常开发中经常需要用到三角形样式，要实现三角形样式可以通过：

1：字体库

2：CSS样式

3：图片


今天我们就来讲一讲如果通过CSS实现各类三角形

实现原理就是，创建一个正方形块元素，然后截取它的某一边，然后将其余部分设置为透明色，即可获取需要的三角形。


1：三角形

翻滚的胖子博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <style>
            arrow{
                width:0;
                height:0;
                border: 10px solid transparent;
                border-left-color: orange;//左箭头
            }
        </style>
    </head>
    <body>
        div class="arrow"></div>
    </body>
</html>


2：梯形

翻滚的胖子博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <style>
            arrow{
                width:10px;
                height:10px;
                border:10px solid #000;
                border-left-color:orange;
            }
        </style>
    </head>
    <body>
        div class="arrow"></div>
    </body>
</html>


3：通过content将三角形与标题融合

翻滚的胖子博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <head>
        <style>
            div{
                position:relative;
            }
            arrow{
                width:0;
                height:0;
                border: 10px solid transparent;
                border-left-color: orange;
                position:absolute;
                content:'';
            }
        </style>
    </head>
    <body>
        div class="arrow"></div>
    </body>
</html>


4：实现箭头符号

翻滚的胖子博客

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
<html>
    <head>
        <style>
            div {
                position: relative; 
            }
            .arrow:after,.arrow:before {
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-left-color: orange;
                position: absolute;
                content: "";
            }
            .arrow:before{
                top: 0;
                left: 70px;//根据实际情况调整
                border-left-color: white;
            }
        </style>
    </head>
    <body>
        div class="arrow"></div>
    </body>
</html>


本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论