search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Magia figur uzyskanych za pomocą CSS

[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

FiguraKod 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

  • Comandeer

    Wybacz, ale kwadrat i prostokąt na tej liście wyglądają wręcz śmiesznie 😉
    Najbardziej podoba mi się, że de facto wszystkie elementy są „czyste”, tzn nie ma n+1 elementów dla gwiazdki, tylko prawidłowo wykorzystane pseudoelementy.
    Jednakże jak dla mnie takie rzeczy to sztuka dla sztuki. Zamiast gwiazdki w CSS, walnąłbym sobie gwiazdkę z @font-face i tyle 😉

  • z pomocą box-shadow (… i dużą ilością czasu) można zrobić nawet cały obraz: http://cssdeck.com/labs/mona-lisa-with-pure-css 😉

  • Piotr Nalepa

    Nie spodziewałem się, że to jest możliwe by zrobić taką Mona Lisę 🙂

  • Świetny pomysł, z Mona Lisa’ą też tylko, żeby okrąg był okręgiem musi mieć wysokość i szerokość 50px. 😉

  • Wielkie dzięki!!!!! dobre

  • Dzięki wielkie za zebranie tej informacji w jeden artykuł.

  • Bardzo fajne efekty. CSS3 robi swoje 😀

  • Mega! Robi wrażenie a szczególnie na przykładzie Mona Lisy, który podrzucił kolega @Winston_Wolf.
    Dzięki za zestawienie.