How to Create a Triangle with CSS

There are many ways to create different shapes with CSS, all depends on the purpose and usage of these shapes. Triangles can be used as a bullets form and we can also create them pointing different directions.

Today in out how-to section we are going to show how you can create some shapes such as triangle with CSS only. We can do it with creating one div but make it more robust we have covered the triangles in all four direction using four different divs, so that it become easy for you to implement this in your layout in either direction. The idea behind is create a box having zero height and width. The arrow’s height and width is specified by the width of border. The one side of border color is set to white and two sides will be make transparent in order to complete a triangle shape. Here is the HTML and CSS code.

HTML

1
2
3
4
5
6
7
<pre><code><div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div></code></pre>

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
51
52
53
54
55
56
57
58
59
60
61
62
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-bottom: 5px solid black;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #f00;
}

.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;

border-left: 60px solid green;
}

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-right:10px solid blue;
}


Related posts

1 Response

By Chaso

August 22, 2011

Great work.i was extremly tired googling these codes and found nothing and at last these codes here.thanks to you for such a great help


Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.