chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

[CSS] Magia figur uzyskanych za pomocą CSS

Ta wersja
blog.piotrnalepa.pl/2012/10/11/css-magia-figur-uzyskanych-za-pomoca-css
Opublikowano
Autor
, Staff Software Engineer
Kategoria
CSS
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 14 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

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.

Sekcja 1Figury za pomocą CSS

Figura Kod CSS

Sekcja 1.1Kwadrat

 
1
2
3
4
5

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

Sekcja 1.2Prostokąt
Przykład 1CSS
1
2
3
4
5

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

Sekcja 1.3Okrąg
Przykład 2CSS
1
2
3
4
5
6

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

Sekcja 1.4Owal
Przykład 3CSS
1
2
3
4
5
6

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

Sekcja 1.5Jajo
Przykład 4CSS
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%;
}

Sekcja 1.6Trójkąt (czubek do góry)
Przykład 5CSS
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;
}

Sekcja 1.7Trójkąt (czubek w dół)
Przykład 6CSS
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;
}

Sekcja 1.8Trójkąt (czubek w lewo)
Przykład 7CSS
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;
}

Sekcja 1.9Trójkąt (czubek w prawo)
Przykład 8CSS
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;
}

Sekcja 1.10Narożnik lewy górny
Przykład 9CSS
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;
}

Sekcja 1.11Narożnik prawy górny
Przykład 10CSS
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;
}

Sekcja 1.12Narożnik lewy dolny
Przykład 11CSS
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; 
}

Sekcja 1.13Narożnik prawy dolny
Przykład 12CSS
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;
}

Sekcja 1.14Strzałka skrótu
Przykład 13CSS
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);
}

Sekcja 1.15Trapez
Przykład 14CSS
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;
}

Sekcja 1.16Romb
Przykład 15CSS
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;
}

Sekcja 1.17Diament
Przykład 16CSS
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;
}

Sekcja 1.18Oszlifowany diament
Przykład 17CSS
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;
}

Sekcja 1.19Tarcza
Przykład 18CSS
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;
}

Sekcja 1.20Równoległobok
Przykład 19CSS
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;
}

Sekcja 1.21Gwiazda 6-ramienna
Przykład 20CSS
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;
}

Sekcja 1.22Gwiazda 5-ramienna
Przykład 21CSS
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: '';
}

Sekcja 1.23Pięciokąt
Przykład 22CSS
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;
}

Sekcja 1.24Sześciokąt
Przykład 23CSS
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;
}

Sekcja 1.25Ośmiokąt
Przykład 24CSS
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;
}

Sekcja 1.26Serce
Przykład 25CSS
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%;
}

Sekcja 1.27Znak nieskończoności
Przykład 26CSS
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);
}

Sekcja 1.28Pacman
Przykład 27CSS
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;
}

Sekcja 1.29Dymek
Przykład 28CSS
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;
}

Sekcja 1.30Plakietka 12-ramienna
Przykład 29CSS
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);
}

Sekcja 1.31Plakietka 8-ramienna
Przykład 30CSS
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);
}

Sekcja 1.32Plakietka ze wstążką
Przykład 31CSS
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); 
}

Sekcja 1.33Ying Yang
Przykład 32CSS
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;
}

Sekcja 1.34Space invader
Przykład 33CSS
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;
}

Sekcja 1.35Ekran TV
Przykład 34CSS
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%;
}

Sekcja 2Podsumowanie 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

Udostępnij

LinkedIn X Bluesky

Uwagi

Napisz do mnie Napisz na X

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!

Powiązane wpisy

  1. CSS Grid – ficzer który uwalnia kreatywność w tworzeniu layoutów CSS ·
  2. [CSS] Wizualizacja ekranu meczowego Premier League za pomocą HTML i CSS CSS ·
  3. [CSS] Kilka sposobów na ożywienie interfejsu użytkownika za pomocą animacji CSS CSS ·