Геометрические фигуры на CSS (часть 2)

Опубликовано:
Рубрика: Css and Html
Редактировалось: 1 раз — 1 июля 2015
Просмотров: 1656
Играет: Spice Girls - willi won
+3
Голосов: 3

Пятиугольник

Код PHP:
  1.  
  2. #pentagon {
  3. position: relative;
  4. width: 54px;
  5. border-width: 50px 18px 0;
  6. border-style: solid;
  7. border-color: red transparent;
  8. }
  9. #pentagon:before {
  10. content: "";
  11. position: absolute;
  12. height: 0;
  13. width: 0;
  14. top: -85px;
  15. left: -18px;
  16. border-width: 0 45px 35px;
  17. border-style: solid;
  18. border-color: transparent transparent red;
  19. }
  20.  

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

Код PHP:
  1.  
  2. #hexagon {
  3. width: 100px;
  4. height: 55px;
  5. background: red;
  6. position: relative;
  7. }
  8. #hexagon:before {
  9. content: "";
  10. position: absolute;
  11. top: -25px;
  12. left: 0;
  13. width: 0;
  14. height: 0;
  15. border-left: 50px solid transparent;
  16. border-right: 50px solid transparent;
  17. border-bottom: 25px solid red;
  18. }
  19. #hexagon:after {
  20. content: "";
  21. position: absolute;
  22. bottom: -25px;
  23. left: 0;
  24. width: 0;
  25. height: 0;
  26. border-left: 50px solid transparent;
  27. border-right: 50px solid transparent;
  28. border-top: 25px solid red;
  29. }
  30.  

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

Код PHP:
  1.  
  2. #octagon {
  3. width: 100px;
  4. height: 100px;
  5. background: red;
  6. position: relative;
  7. }
  8.  
  9. #octagon:before {
  10. content: "";
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. border-bottom: 29px solid red;
  15. border-left: 29px solid #eee;
  16. border-right: 29px solid #eee;
  17. width: 42px;
  18. height: 0;
  19. }
  20.  
  21. #octagon:after {
  22. content: "";
  23. position: absolute;
  24. bottom: 0;
  25. left: 0;
  26. border-top: 29px solid red;
  27. border-left: 29px solid #eee;
  28. border-right: 29px solid #eee;
  29. width: 42px;
  30. height: 0;
  31. }
  32.  

Сердечко

Код PHP:
  1.  
  2. #heart {
  3. position: relative;
  4. width: 100px;
  5. height: 90px;
  6. }
  7. #heart:before,
  8. #heart:after {
  9. position: absolute;
  10. content: "";
  11. left: 50px;
  12. top: 0;
  13. width: 50px;
  14. height: 80px;
  15. background: red;
  16. -moz-border-radius: 50px 50px 0 0;
  17. border-radius: 50px 50px 0 0;
  18. -webkit-transform: rotate(-45deg);
  19. -moz-transform: rotate(-45deg);
  20. -ms-transform: rotate(-45deg);
  21. -o-transform: rotate(-45deg);
  22. transform: rotate(-45deg);
  23. -webkit-transform-origin: 0 100%;
  24. -moz-transform-origin: 0 100%;
  25. -ms-transform-origin: 0 100%;
  26. -o-transform-origin: 0 100%;
  27. transform-origin: 0 100%;
  28. }
  29. #heart:after {
  30. left: 0;
  31. -webkit-transform: rotate(45deg);
  32. -moz-transform: rotate(45deg);
  33. -ms-transform: rotate(45deg);
  34. -o-transform: rotate(45deg);
  35. transform: rotate(45deg);
  36. -webkit-transform-origin: 100% 100%;
  37. -moz-transform-origin: 100% 100%;
  38. -ms-transform-origin: 100% 100%;
  39. -o-transform-origin: 100% 100%;
  40. transform-origin :100% 100%;
  41. }
  42.  

Знак бесконечности

Код PHP:
  1.  
  2. #infinity {
  3. position: relative;
  4. width: 212px;
  5. height: 100px;
  6. }
  7.  
  8. #infinity:before,
  9. #infinity:after {
  10. content: "";
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 60px;
  15. height: 60px;
  16. border: 20px solid red;
  17. -moz-border-radius: 50px 50px 0 50px;
  18. border-radius: 50px 50px 0 50px;
  19. -webkit-transform: rotate(-45deg);
  20. -moz-transform: rotate(-45deg);
  21. -ms-transform: rotate(-45deg);
  22. -o-transform: rotate(-45deg);
  23. transform: rotate(-45deg);
  24. }
  25.  
  26. #infinity:after {
  27. left: auto;
  28. right: 0;
  29. -moz-border-radius: 50px 50px 50px 0;
  30. border-radius: 50px 50px 50px 0;
  31. -webkit-transform:rotate(45deg);
  32. -moz-transform:rotate(45deg);
  33. -ms-transform:rotate(45deg);
  34. -o-transform:rotate(45deg);
  35. transform:rotate(45deg);
  36. }
  37.  
Комментарии (0)

Нет комментариев. Ваш будет первым!

Голосуем

Самый нужный компонент