chevron-left chevron-right

[CSS] Magia figur uzyskanych za pomocą CSS

Rozwój specyfikacji CSS3, w ostatnich latach, pozwolił na wykorzystywanie tylko i wyłącznie kodu CSS w miejscach, gdzie do tej pory korzystano z JS czy obrazków. Jest to bardzo wygodne i nieraz pozwala zaoszczędzić na wadze końcowej otwieranej strony, dzięki czemu strona otwiera się i generuje się szybciej niż kiedykolwiek. Do tej pory, skupiano się głównie na animacjach i gradientach. Dzisiaj przedstawię jak tworzyć figury geometryczne za pomocą CSS.

Przedstawione przykłady w 100% będą działać w najnowszych wersjach przeglądarek: Mozilla Firefox, Google Chrome, IE9 i wyżej, Safari i Operze. Szczerze polecam zaktualizować wersję Internet Explorera do wersji 9-tej, dzięki czemu będzie można się cieszyć z większości możliwości obecnej specyfikacji CSS3.

Figury za pomocą CSS

Figura Kod CSS

Kwadrat

 
1
2
3
4
5

.square {
	width: 100px;
	height: 100px;
	background: #b30;
}

Prostokąt

 
1
2
3
4
5

.rectangle {
	width: 100px;
	height: 50px;
	background: #b30;
}

Okrąg

 
1
2
3
4
5
6

.circle {
	background: #b30;
	border-radius: 50px;
	width: 100px;
	height: 100px;
}

Owal

 
1
2
3
4
5
6

.oval {
	background: #b30;
	width: 100px;
	height: 50px;
	border-radius: 50px / 25px;
}

Jajo

 
1
2
3
4
5
6
7
8

.egg {
	display: block;
	width: 100px; 
	height: 140px;
	background-color: #b30;
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Trójkąt (czubek do góry)

 
1
2
3
4
5
6
7
8
9

.triangle {
	width: 0;
	height: 0;
}
.triangle.up {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #b30;
}

Trójkąt (czubek w dół)

 
1
2
3
4
5
6
7
8
9

.triangle {
	width: 0;
	height: 0;
}
.triangle.down {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #b30;
}

Trójkąt (czubek w lewo)

 
1
2
3
4
5
6
7
8
9

.triangle {
	width: 0;
	height: 0;
}
.triangle.left {
	border-top: 50px solid transparent;
	border-right: 100px solid #b30;
	border-bottom: 50px solid transparent;
}

Trójkąt (czubek w prawo)

 
1
2
3
4
5
6
7
8
9

.triangle {
	width: 0;
	height: 0;
}
.triangle.right {
	border-top: 50px solid transparent;
	border-left: 100px solid #b30;
	border-bottom: 50px solid transparent;
}

Narożnik lewy górny

 
1
2
3
4
5
6
7
8

.triangle {
	width: 0;
	height: 0;
}
.triangle.topleft {
	border-top: 100px solid #b30; 
	border-right: 100px solid transparent;
}

Narożnik prawy górny

 
1
2
3
4
5
6
7
8

.triangle {
	width: 0;
	height: 0;
}
.triangle.topright {
	border-top: 100px solid #b30; 
	border-left: 100px solid transparent;
}

Narożnik lewy dolny

 
1
2
3
4
5
6
7
8

.triangle {
	width: 0;
	height: 0;
}
.triangle.bottomleft {
	border-bottom: 100px solid #b30; 
	border-right: 100px solid transparent; 
}

Narożnik prawy dolny

 
1
2
3
4
5
6
7
8

.triangle {
	width: 0;
	height: 0;
}
.triangle.bottomright {
	border-bottom: 100px solid #b30; 
	border-left: 100px solid transparent;
}

Strzałka skrótu

 
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

.shortcut {
	position: relative;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-right: 9px solid #b30;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
}
.shortcut:after {
	content: '';
	position: absolute;
	border: 0 solid transparent;
	border-top: 3px solid #b30;
	border-radius: 20px 0 0 0;
	top: -12px;
	left: -9px;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

Trapez

 
1
2
3
4
5
6
7

.trapez {
	border-bottom: 50px solid #b30;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 50px;
}

Romb

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.romb {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color:#b30;
	position: relative;
	top: -50px;
}
.romb:after {
	content: '';
	position: absolute;
	left: -50px; 
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color:#b30;
}

Diament

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: #b30;
	position: relative;
	top: -50px;
}
.diamond:after {
	content: '';
	position: absolute;
	left: -50px; 
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: #b30;
}

Oszlifowany diament

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.diamond-cut {
	border-style: solid;
	border-color: transparent transparent#b30 transparent;
	border-width: 0 25px 25px 25px;
	height: 0;
	width: 50px;
	position: relative;
	margin: 20px 0 50px 0;
}
.diamond-cut:after {
	content: '';
	position: absolute;
	top: 25px;
	left: -25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color:#b30 transparent transparent transparent;
	border-width: 70px 50px 0 50px;
}

Tarcza

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.shield {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 20px solid #b30;
	position: relative;
	top: -50px;
}
.shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 20px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid #b30;
}

Równoległobok

 
1
2
3
4
5
6
7
8

.parallelogram {
	width: 100px;
	height: 60px;
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
	background: #b30;
}

Gwiazda 6-ramienna

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #b30;
	position: relative;
}
.star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #b30;
	position: absolute;
	content: '';
	top: 30px;
	left: -50px;
}

Gwiazda 5-ramienna

 
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

.star-five {
	margin: 25px 0;
	position: relative;
	display: block;
	color: #b30;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px  solid #b30;
	border-left: 100px solid transparent;
	-moz-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
}
.star-five:before {
	border-bottom: 80px solid #b30;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	content: '';
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
}
.star-five:after {
	position: absolute;
	display: block;
	color:#b30;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #b30;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
	content: '';
}

Pięciokąt

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.pentagon {
	position: relative;
	width: 54px;
	border-width: 50px 18px 0;
	border-style: solid;
	border-color:#b30 transparent;
}
.pentagon:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -85px;
	left: -18px;
	border-width: 0 45px 35px;
	border-style: solid;
	border-color: transparent transparent#b30;
}

Sześciokąt

 
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

.hexagon {
	width: 100px;
	height: 55px;
	background: #b30;
	position: relative;
}
.hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid #b30;
}
.hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #b30;
}

Ośmiokąt

 
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

.octagon {
	width: 100px;
	height: 100px;
	background: #b30;
	position: relative;
}
.octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid #b30;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}
.octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid #b30;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}

Serce

 
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

.heart {
	position: relative;
	width: 100px;
	height: 90px;
}
.heart:before,
.heart:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: red;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.heart:after {
	left: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}

Znak nieskończoności

 
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

.infinity {
	position: relative;
	width: 100px;
	height: 48px;
}
.infinity:before,
.infinity:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;    
	border: 9px solid #b30;
	-moz-border-radius: 23px 23px 0 23px;
	border-radius: 23px 23px 0 23px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.infinity:after {
	left: auto;
	right: 0;
	-moz-border-radius: 23px 23px 23px 0;
	border-radius: 23px 23px 23px 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

Pacman

 
1
2
3
4
5
6
7
8
9
10
11
12

.pacman {
	width: 0;
	height: 0;
	border-right: 60px solid transparent;
	border-top: 60px solid #b30;
	border-left: 60px solid #b30;
	border-bottom: 60px solid #b30;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
}

Dymek

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.dymek {
	width: 120px; 
	height: 80px; 
	background: #b30;
	position: relative;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
}
.dymek:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid #b30;
	border-bottom: 13px solid transparent;
}

Plakietka 12-ramienna

 
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

.badge-twelve {
	background: #b30;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
}
.badge-twelve:before, .badge-twelve:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background: #b30;
}
.badge-twelve:before {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
}
.badge-twelve:after {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
}

Plakietka 8-ramienna

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.badge-eight {
	background: #b30;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-o-transform: rotate(20eg);
}
.badge-eight:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background: #b30;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
}

Plakietka ze wstążką

 
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

.badge-ribbon {
	position: relative;
	background: #b30;
	height: 100px;
	width: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
.badge-ribbon:before,
.badge-ribbon:after {
	content: '';            
	position: absolute;            
	border-bottom: 70px solid #b30;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	top: 70px;
	left: -10px;
	-webkit-transform: rotate(-140deg);
	-moz-transform: rotate(-140deg);
	-ms-transform: rotate(-140deg);
	-o-transform: rotate(-140deg); 
}
.badge-ribbon:after {
	left: auto;
	right: -10px;
	-webkit-transform: rotate(140deg);
	-moz-transform: rotate(140deg);
	-ms-transform: rotate(140deg);
	-o-transform: rotate(140deg); 
}

Ying Yang

 
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

.ying-yang{
	width: 96px;
	height: 48px;
	background: #fff;
	border-color:#b30;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}
.ying-yang:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background: #fff;
	border: 18px solid #b30;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}
.ying-yang:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: #b30;
	border: 18px solid #fff;
	border-radius:100%;
	width: 12px;
	height: 12px;
}

Space invader

 
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

.space-invader{
	box-shadow:
		0 0 0 1em #b30, 
		0 1em 0 1em #b30, 
		-2.5em 1.5em 0 .5em #b30, 
		2.5em 1.5em 0 .5em #b30, 
		-3em -3em 0 0 #b30, 
		3em -3em 0 0 #b30, 
		-2em -2em 0 0 #b30, 
		2em -2em 0 0 #b30, 
		-3em -1em 0 0 #b30, 
		-2em -1em 0 0 #b30, 
		2em -1em 0 0 #b30, 
		3em -1em 0 0 #b30, 
		-4em 0 0 0 #b30, 
		-3em 0 0 0 #b30, 
		3em 0 0 0 #b30, 
		4em 0 0 0 #b30, 
		-5em 1em 0 0 #b30, 
		-4em 1em 0 0 #b30, 
		4em 1em 0 0 #b30, 
		5em 1em 0 0 #b30, 
		-5em 2em 0 0 #b30, 
		5em 2em 0 0 #b30, 
		-5em 3em 0 0 #b30, 
		-3em 3em 0 0 #b30, 
		3em 3em 0 0 #b30, 
		5em 3em 0 0 #b30, 
		-2em 4em 0 0 #b30, 
		-1em 4em 0 0 #b30, 
		1em 4em 0 0 #b30, 
		2em 4em 0 0 #b30; 
	background: #b30;
	width: 1em;
	height: 1em;
	overflow: hidden;
	margin: 50px 0 70px 65px;
}

Ekran TV

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.tv-screen {
	position: relative;
	width: 100px;
	height: 75px;
	margin: 20px 0;
	background: #b30;
	border-radius: 50% / 10%;
	color: white;
	text-align: center;
	text-indent: .1em;
}
.tv-screen:before {
	content: '';
	position: absolute;
	top: 10%;
	bottom: 10%; 
	right: -5%; 
	left: -5%;
	background: inherit;
	border-radius: 5% / 50%;
}

Podsumowanie informacji o figurach w CSS

Jak widać, jest to długa lista przykładów wykorzystania figur geometrycznych utworzonych za pomocą CSS. Dzięki nim można tworzyć elementy interfejsu użytkownika lub nawet loga, unikając przy tym korzystania z obrazków.

Dodatkowe demo możliwości CSS znajduje się pod tym linkiem: CSS figury geometryczne

źródło