当前位置:

CSS三角形

本文最后更新于2014-08-12,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共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>
版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句