index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>12 shapes - CSS Gradient Borders</title>
  6. <style>
  7. body{
  8. margin: 0;
  9. display: flex;
  10. flex-wrap: wrap;
  11. justify-content: space-around;
  12. align-items: center;
  13. min-height: 100vh;
  14. background-color: #080808;
  15. }
  16. .shape-outer{
  17. display: flex;
  18. flex-shrink: 0;
  19. height: calc(150px + 4vw);
  20. width: calc(150px + 4vw);
  21. margin: 25px;
  22. background-image: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
  23. }
  24. .shape-inner{
  25. height: calc(130px + 4vw);
  26. width: calc(130px + 4vw);
  27. background: url("../006_3_shapes_gradient_border/photo.jpg") no-repeat center;
  28. background-size: cover;
  29. margin: auto;
  30. }
  31. .pentagon{
  32. -webkit-clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
  33. clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
  34. }
  35. .hexagon{
  36. -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  37. clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  38. }
  39. .heptagon{
  40. -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
  41. clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
  42. }
  43. .octagon{
  44. -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  45. clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  46. }
  47. .nonagon{
  48. -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  49. clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  50. }
  51. .decagon{
  52. -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
  53. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
  54. }
  55. .circle{
  56. -webkit-clip-path: circle(50% at 50% 50%);
  57. clip-path: circle(50% at 50% 50%);
  58. }
  59. .ellipse{
  60. -webkit-clip-path: ellipse(35% 50% at 50% 50%);
  61. clip-path: ellipse(35% 50% at 50% 50%);
  62. }
  63. .triangle{
  64. -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  65. clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  66. }
  67. .rhombus{
  68. -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  69. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  70. }
  71. .trapezoid{
  72. -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  73. clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  74. }
  75. .parallelogram{
  76. -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  77. clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  78. }
  79. .bevel{
  80. -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  81. clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  82. }
  83. .rabbet {
  84. -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
  85. clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
  86. }
  87. .sign-left{
  88. -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
  89. clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
  90. }
  91. .sign-right{
  92. -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  93. clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  94. }
  95. .chevron-left{
  96. -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  97. clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  98. }
  99. .chevron-right{
  100. -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  101. clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div class="shape-outer pentagon">
  107. <div class="shape-inner pentagon"></div>
  108. </div>
  109. <div class="shape-outer hexagon">
  110. <div class="shape-inner hexagon"></div>
  111. </div>
  112. <div class="shape-outer heptagon">
  113. <div class="shape-inner heptagon"></div>
  114. </div>
  115. <div class="shape-outer octagon">
  116. <div class="shape-inner octagon"></div>
  117. </div>
  118. <div class="shape-outer nonagon">
  119. <div class="shape-inner nonagon"></div>
  120. </div>
  121. <div class="shape-outer decagon">
  122. <div class="shape-inner decagon"></div>
  123. </div>
  124. <div class="shape-outer circle">
  125. <div class="shape-inner circle"></div>
  126. </div>
  127. <div class="shape-outer ellipse">
  128. <div class="shape-inner ellipse"></div>
  129. </div>
  130. <div class="shape-outer triangle">
  131. <div class="shape-inner triangle"></div>
  132. </div>
  133. <div class="shape-outer rhombus">
  134. <div class="shape-inner rhombus"></div>
  135. </div>
  136. <div class="shape-outer trapezoid">
  137. <div class="shape-inner trapezoid"></div>
  138. </div>
  139. <div class="shape-outer parallelogram">
  140. <div class="shape-inner parallelogram"></div>
  141. </div>
  142. <div class="shape-outer bevel">
  143. <div class="shape-inner bevel"></div>
  144. </div>
  145. <div class="shape-outer rabbet">
  146. <div class="shape-inner rabbet"></div>
  147. </div>
  148. <div class="shape-outer sign-left">
  149. <div class="shape-inner sign-left"></div>
  150. </div>
  151. <div class="shape-outer sign-right">
  152. <div class="shape-inner sign-right"></div>
  153. </div>
  154. <div class="shape-outer chevron-left">
  155. <div class="shape-inner chevron-left"></div>
  156. </div>
  157. <div class="shape-outer chevron-right">
  158. <div class="shape-inner chevron-right"></div>
  159. </div>
  160. <script>
  161. // https://codepen.io/GeorgePark/pen/ZoaRrV
  162. </script>
  163. </body>
  164. </html>