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: radial-gradient(#EF7D55, #F24012);
}