CSS三角形

haibao 笔记 2014-08-12 11:17 666
活得累是因为心里装了多余的东西,跟吃饱了撑的是一个道理。

欢迎您,我猜是来自美国的朋友! 本文共1714个字,预计阅读时间需要5分钟。

在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天直接用CSS写出小三角!

先看看如何写出各种小三角的吧!

css代码:

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
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #000;
}
 
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid #000;
}
 
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid #000;
}
 
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #000;
}
 
/*:after 伪元素在元素之后添加内容实现小三角*/
.box{ width:300px; height:300px; background:#838383; position:relative;}
.box:after{
position:absolute;
right:-20px;
top:10px;
display:block;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #838383;
}

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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{ margin-bottom:20px;}
               /*箭头向上*/
                .arrow-up {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-bottom:30px solid #000;
                }
 
                 /*箭头向下*/
                .arrow-down {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-top:30px solid #000;
                }
 
                 /*箭头向左*/
                .arrow-left {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom:30px solid transparent; 
                        border-right:30px solid #000; 
                }
 
                /*箭头向右*/
                .arrow-right {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom: 30px solid transparent;
                        border-left: 30px solid #000;
                }
 
                .box{ width:300px; height:300px; background:#838383; position:relative;}
                .box:after{
                    position:absolute;
                        right:-20px;
                        top:10px;
                    display:block;
                        content:"";
                    width:0; 
                        height:0; 
                        border-top:20px solid transparent;
                        border-bottom: 20px solid transparent;
                        border-left: 20px solid #838383;
                }
 
        </style>
</head>
<body>
 
        <div class="arrow-up">
     <!--向上的三角-->
        </div>
        <div class="arrow-down">
                <!--向下的三角-->
        </div>
        <div class="arrow-left">
                <!--向左的三角-->
        </div>
        <div class="arrow-right">
                <!--向右的三角-->
        </div>
 
        <div class="box">
                 :after 伪元素在元素之后添加内容实现小三角
        </div>
 
 
</body>
</html>

本文标题:CSS三角形

本文地址:http://www.hehaibao.com/css-arrow/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>