CSS фигуры

Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.

1. Круг

.d1 {
width: 100px; height: 100px;
background: #83A7C9;
border-radius: 50%;}

2. Овал

.d2 {
width: 200px; height: 100px;
background: #9CD6C0;
border-radius: 100px/50px;}

3. Треугольник вершиной вверх

.d3 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;}

4. Треугольник вершиной вниз

.d4 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #79849B;}

5. Треугольник вершиной влево

.d5 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #959FB0;
border-bottom: 50px solid transparent;}

6. Треугольник вершиной вправо

.d6 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #D0D4DC;
border-bottom: 50px solid transparent;}

7. Верхний левый угол

.d7 {
width: 0; height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;}

8. Верхний правый угол

.d8 {
width: 0; height: 0;
border-top: 100px solid #82C6BE;
border-left: 100px solid transparent;}

9. Нижний левый угол

.d9 {
width: 0; height: 0; 
border-bottom: 100px solid #BBE1DE;
border-right: 100px solid transparent;}

10. Нижний правый угол

.d10 {
width: 0; height: 0;
border-bottom: 100px solid #CDE5E1;
border-left: 100px solid transparent;}

11. Трапеция

.d11 {
height: 0; width: 100px;
border-bottom: 100px solid #FFE344;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

12. Параллелограмм

.d12 {
margin-left: 20px; width: 150px; height: 100px;
transform: skew(20deg);
background: #D4D5DA;}

13. Шестиугольная звезда

.d13 {
width: 0; height: 0; margin-bottom: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #374F9C;
position: relative;}
.d13:after {
content: "";
width: 0; height: 0;
position: absolute; top: 30px; left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #374F9C;}

14. Пятиугольная звезда

.d14 {
margin: 50px 0; height: 0; width: 0;
position: relative;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(35deg);}
.d14:before, .d14:after {
content: "";
height: 0; width: 0;
position: absolute;}
.d14:before {
top: -26px; left: -32px;
border-bottom: 40px solid #E7337A;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
transform: rotate(-35deg);}
.d14:after {
top: 2px; left: -53px;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(-70deg);}

15. Стрелка

.d15 {
width: 60px; height: 20px; margin: 10px 0;
background: #B74388;
position: relative;}
.d15:after{
content: "";
width: 0; height: 0;
position: absolute; top: -10px; left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent #B74388;}

16. Шестиугольник

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

17. Восьмиугольник

.d17 {
width: 100px; height: 100px;
background: #54999A;
position: relative;}
.d17:before, .d17:after {
content: "";
width: 42px; height: 0;
position: absolute; left: 0;
border-left: 29px solid white;
border-right: 29px solid white;}
.d17:before {
top: 0;
border-bottom: 29px solid #54999A;}
.d17:after {
bottom: 0;
border-top: 29px solid #54999A;}

18. Сердце

.d18 {
position: relative;
width: 100px; height: 80px;}
.d18:before, .d18:after {
content: "";
position: absolute; left: 50px; top: 0;
width: 50px; height: 80px;
background: #EE4156;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg); transform-origin: 0 100%;}
.d18:after {
left: 0;
transform: rotate(45deg); transform-origin: 100% 100%;}

19. Ромб

.d19 {
width: 0; height: 0;
border: 50px solid transparent;
border-bottom-color: #53BA88;
position: relative; top: -50px;}
.d19:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 50px;
border: 50px solid transparent;
border-top-color: #53BA88;}

20. Ромб

.d20 {
margin-bottom: 20px; width: 0; height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #47002D;
position: relative; top: -50px;}
.d20:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;}

21. Символ Инь-Ян

.d21 {
width: 100px; height: 50px;
background: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
position: relative;}
.d21:before, .d21:after{
content: "";
width: 12px; height: 12px;
position: absolute; top: 50%;
border-radius: 50%;}
.d21:before {
left: 0;
background: white;
border: 19px solid black;}
.d21:after {
left: 50%;
background: black;
border: 19px solid white;}

22. Пакман

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

23. Домик с крышей

.d23 {
height: 55px; width: 100px; margin: 35px 20px 0 0;
background: #B1BA5C;
position: relative;}
.d23:before {
content: "";
height: 0; width: 0;
position: absolute; left: 0; top: -35px;
border-bottom: 35px solid #B1BA5C;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

24. Крест

.d24 {
background: #CD6D45;
height: 100px; width: 20px;
position: relative; left: 40px;}
.d24:after {
content: "";
height: 20px; width: 100px;
background: #CD6D45;
position: absolute; left: -40px; top: 40px;}

25. Сегмент

.d25 {
width: 0; height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 110px solid #2B2F6E;
border-radius: 50%;}

26. Полумесяц

.d26 {
width: 100px; height: 100px; margin: -20px 0 20px 0;
border-radius: 50%;
box-shadow: 15px 15px 0 0 #FEC712;}

27. Лупа

.d27{
font-size: 10em; /* задает размер иконки */
width: 0.3em; height: 0.3em; margin-bottom: 20px;
border: 0.1em solid #52C8E4;
position: relative;
border-radius: 50%;}
.d27:before {
content: "";
width: 0.3em; height: 0.08em;
position: absolute; right: -0.25em; bottom: -0.1em;
background: #52C8E4;
transform: rotate(45deg);}

28. Шеврон

.d28 {
height: 50px; width: 160px; margin: 6px;
position: relative;}
.d28:before, .d28:after {
content: "";
height: 100%; width: 50%;
position: absolute; top: 0;
background: #F45919;}
.d28:before {
left: 0;
transform: skew(0deg, 10deg);}
.d28:after {
right: 0;
transform: skew(0deg, -10deg);}

29. Ретро-телевизор

.d29 {
width: 100px; height: 80px;
background: #BDE2E0;
border-radius: 50%/10%;
position: relative;}
.d29:before {
content: "";
position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%;
background: inherit;
border-radius: 5%/50%;}

30. Ленточка

.d30 {
width: 0; height: 0; 
border-width: 50px 30px 20px;
border-style: solid;
border-color: #E95557 #E95557 transparent;}

31. Плоская восьмиконечная звезда

.d31 {
width: 80px; height: 80px; margin: 10px;
background: #82707C;
position: relative;
transform: rotate(20deg);}
.d31:before {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;
transform: rotate(135deg);}

32. Плоская двенадцатиконечная звезда

.d32 {
width: 80px; height: 80px; margin: 10px;
background: #D7695A;
position: relative;}
.d32:before, .d32:after {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;}
.d32:before {
transform: rotate(30deg);}
.d32:after {
transform: rotate(60deg);}

33. Облачко комментария

.d33 {
width: 150px; height: 80px; margin-left: 26px;
background: #B5DDD4;
position: relative;
border-radius: 10px;}
.d33:before {
content: "";
width: 0; height: 0;
position: absolute; right: 100%; top: calc(50% - 12px);
border-top: 12px solid transparent;
border-right: 24px solid #B5DDD4;
border-bottom: 12px solid transparent;}

34. Цветок

.d34 {
width: 80px; height: 80px; margin-top: 25px;
background: #EE5E4F; 
position: relative; top: -15px; left: 15px;
border-radius: 8px;}
.d34:before, .d34:after {
content: "";
position: absolute; top: 0; left: 0;
width: 80px; height: 80px; 
background: inherit;
border-radius: 8px;}
.d34:before {
transform: rotate(30deg);}
.d34:after {
transform: rotate(60deg);}

35. Тюльпан

.d35 {
height: 15px; width: 60px;
background: linear-gradient(45deg, #E5556B 50%, transparent 51%), linear-gradient(315deg, #E5556B 50%, transparent 51%);
background-size: 30px 30px;
border-bottom: 40px solid #E5556B;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 60%;}

36. Тюльпан

.d36 {
width: 20px; height: 20px; margin: 0 0 30px 10px;
border: 3px solid #AD1E21;
background: #EB4E48;
position: relative;
transform: rotate(45deg);}  
.d36:before, .d36:after {
content: "";
position: absolute;
width: 30px; height: 50px;
border: 3px solid #AD1E21;
transform: rotate(-45deg);}
.d36:before {
background: #F8D9D1;
border-radius: 0 100% 50% 90%;}
.d36:after {
left: 10px; top: -10px;
background: #F09C9C;
border-radius: 100% 0  90% 50%;}

37. Лепесток

.d37 {
width: 5em; height: 5em; margin: 1em 1em;
background: #02C986;
border-radius: 100% 0;}

38. Цветок из лепестков

.d38 {
width: 2.5em; height: 2.5em; margin: 2em 4.5em 4em;
border-radius: 100% 0;
background: #32336B;
box-shadow: -3em 3em #32336B;
position: relative;}
.d38:before, .d38:after {
content: "";
width: 2.5em; height: 2.5em; margin: 1em 3em;
border-radius: 0 100%;
background: #32336B;
position: absolute; left: -6em; top: -1em;
box-shadow: 3em 3em #32336B;
transform-origin: 2.75em 2.75em;}
.d38:before {
transform: rotate(-30deg);}
.d38:after {
transform: rotate(30deg);}

39. Облако

.d39 {
position: relative;
width: 3em; height: 3em; margin: 2em;
background: #D5DEE9;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;
border-radius: 50% 50% 0 0;}
.d39:before, .d39:after {
content: "";
position: absolute; bottom: -0.25em;
background: inherit;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;}
.d39:before {
left: 80%; 
width: 60%; height: 60%;
border-left: none;
border-radius: 50% 50% 50% 0;}
.d39:after {
right: 80%;
width: 80%; height: 80%;
border-right: none;
border-radius: 50% 50% 0;}

40. Круг из четырех сегментов

.d40 {
width: 0; height: 0;
background: lightblue;
border-radius: 50%;
border-style: solid;
border-width: 50px;
border-top-color: salmon;
border-right-color: transparent;
border-bottom-color: salmon;
border-left-color: transparent;}

41. Прелоадер

.d41 {
width: 0; height: 0;
margin: 60px;
border: 13px solid transparent;
border-radius:50%;
box-shadow: -30px -30px 0 0 red,
30px 30px 0 0 blue,
-30px 30px 0 0 yellow,
30px -30px 0 0 grey,
0 -45px 0 0 orange,
0 45px 0 0 aqua,
45px 0 0 0 brown,
-45px 0 0 0 crimson;}

42. Прелоадер

.d42 {
width: 100px; height: 100px;
border-radius: 50%;
background: #BCD3DC;
position: relative;}
.d42:after {
content: "";
width: 60px; height: 60px;
position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);
background: #FFD646;
border-radius: 0 50% 50% 50%;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);}

43. Прелоадер

.d43 {
width: 100px; height: 100px;
border: 15px solid #497DDD;  
border-right-color: transparent;
border-radius: 50%;
border-left-color:transparent;
position: relative;}
.d43:after {
content: "";
width: 40px; height: 40px;
border-radius: 50%;
position: absolute; top: calc(50% - 20px); left: calc(50% - 20px);
background: -webkit-radial-gradient(#EF7D55, #F24012);
background: -o-radial-gradient(#EF7D55, #F24012);
background: radial-gradient(#EF7D55, #F24012);}