Главная Клубы Дизайн и верстка InstantCMS Блог клуба Дизайн и верстка InstantCMS

Геометрические фигуры на 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)

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

Добавить комментарий

Голосуем

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