Last active
January 16, 2020 10:56
-
-
Save veltman/2cd093f397129593a5de to your computer and use it in GitHub Desktop.
NYC in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| div { | |
| position: absolute; | |
| width: 99vw; | |
| height: 99vw; | |
| } | |
| .StatenIsland { | |
| background-color: #66c2a5; | |
| } | |
| .Manhattan { | |
| background-color: #fc8d62; | |
| } | |
| .Queens { | |
| background-color: #8da0cb; | |
| } | |
| .Bronx { | |
| background-color: #e78ac3; | |
| } | |
| .Brooklyn { | |
| background-color: #a6d854; | |
| } | |
| .StatenIsland { -webkit-clip-path: polygon(32% 63%, 34% 65%, 34% 69%, 37% 73%, 37% 74%, 33% 79%, 30% 82%, 28% 85%, 24% 87%, 23% 86%, 22% 88%, 19% 90%, 16% 92%, 15% 92%, 13% 94%, 11% 94%, 9% 96%, 7% 96%, 5% 97%, 4% 97%, 3% 95%, 4% 92%, 5% 90%, 4% 87%, 7% 84%, 10% 84%, 11% 78%, 11% 76%, 12% 75%, 12% 73%, 12% 67%, 14% 64%, 16% 64%, 18% 65%, 20% 66%, 23% 65%, 25% 65%, 27% 64%, 30% 64%); } | |
| .Manhattan.p1 { -webkit-clip-path: polygon(60% 29%, 60% 29%, 61% 30%, 61% 30%, 59% 33%, 57% 32%, 58% 30%, 59% 28%, 59% 28%); } | |
| .Manhattan.p2 { -webkit-clip-path: polygon(59% 11%, 61% 12%, 61% 14%, 59% 17%, 57% 21%, 57% 27%, 58% 29%, 58% 30%, 56% 33%, 56% 34%, 51% 42%, 50% 44%, 51% 45%, 50% 49%, 47% 50%, 44% 51%, 43% 50%, 44% 47%, 44% 40%, 47% 36%, 52% 25%, 55% 21%, 55% 19%, 55% 17%, 56% 17%); } | |
| .Queens.p1 { -webkit-clip-path: polygon(70% 61%, 71% 60%, 69% 56%, 69% 53%, 66% 55%, 64% 55%, 63% 54%, 62% 52%, 61% 51%, 59% 49%, 59% 48%, 58% 45%, 57% 45%, 56% 43%, 53% 42%, 56% 36%, 57% 35%, 59% 34%, 62% 31%, 63% 31%, 65% 33%, 67% 33%, 71% 35%, 70% 37%, 72% 38%, 73% 37%, 72% 35%, 72% 33%, 70% 32%, 72% 30%, 74% 30%, 75% 30%, 77% 29%, 78% 30%, 81% 30%, 81% 31%, 83% 31%, 84% 30%, 85% 32%, 87% 36%, 89% 33%, 97% 40%, 98% 43%, 96% 45%, 92% 47%, 93% 49%, 93% 56%, 93% 60%, 93% 62%, 90% 64%, 90% 66%, 86% 68%, 85% 69%, 84% 68%, 83% 70%, 82% 72%, 80% 71%, 81% 69%, 82% 69%, 83% 67%, 82% 66%, 77% 64%, 77% 63%, 74% 63%, 72% 64%); } | |
| .Queens.p2 { -webkit-clip-path: polygon(86% 71%, 87% 72%, 90% 71%, 91% 74%, 90% 75%, 88% 76%, 84% 76%, 78% 78%, 66% 83%, 63% 84%, 56% 87%, 56% 85%, 59% 83%, 61% 82%, 63% 82%, 64% 81%, 67% 81%, 72% 78%, 74% 78%, 77% 77%, 79% 76%, 80% 74%, 82% 75%, 84% 72%); } | |
| .Queens.p3 { -webkit-clip-path: polygon(74% 71%, 75% 69%, 75% 67%, 76% 66%, 78% 72%, 77% 75%, 75% 75%, 77% 72%, 76% 71%); } | |
| .Bronx.p1 { -webkit-clip-path: polygon(68% 32%, 65% 32%, 64% 30%, 65% 29%, 68% 31%); } | |
| .Bronx.p2 { -webkit-clip-path: polygon(82% 16%, 84% 18%, 82% 18%); } | |
| .Bronx.p3 { -webkit-clip-path: polygon(68% 5%, 70% 6%, 71% 4%, 73% 5%, 74% 8%, 82% 10%, 83% 13%, 81% 17%, 80% 15%, 78% 16%, 77% 17%, 78% 19%, 78% 20%, 78% 23%, 80% 26%, 78% 26%, 75% 27%, 74% 26%, 70% 28%, 69% 26%, 68% 29%, 66% 28%, 65% 28%, 63% 28%, 61% 30%, 60% 29%, 60% 29%, 59% 28%, 59% 28%, 58% 27%, 57% 21%, 58% 19%, 61% 14%, 62% 13%, 61% 12%, 59% 11%, 62% 3%); } | |
| .Brooklyn.p1 { -webkit-clip-path: polygon(69% 70%, 67% 69%, 69% 68%); } | |
| .Brooklyn.p2 { -webkit-clip-path: polygon(59% 48%, 59% 49%, 61% 51%, 62% 52%, 63% 54%, 64% 55%, 66% 55%, 69% 53%, 69% 56%, 71% 60%, 70% 61%, 70% 62%, 71% 63%, 71% 64%, 67% 66%, 64% 69%, 64% 73%, 61% 73%, 62% 74%, 66% 73%, 67% 77%, 67% 79%, 64% 79%, 63% 77%, 61% 77%, 61% 75%, 59% 74%, 59% 74%, 61% 77%, 61% 78%, 59% 78%, 58% 78%, 58% 80%, 56% 80%, 47% 81%, 44% 80%, 45% 78%, 46% 78%, 46% 76%, 45% 74%, 41% 73%, 39% 71%, 39% 67%, 40% 64%, 41% 64%, 45% 59%, 43% 57%, 43% 56%, 44% 55%, 46% 52%, 47% 50%, 51% 50%, 51% 48%, 52% 47%, 53% 43%, 54% 43%, 56% 43%, 57% 45%, 58% 45%); } | |
| </style> | |
| <body> | |
| <div class="StatenIsland"></div> | |
| <div class="Manhattan p1"></div><div class="Manhattan p2"></div> | |
| <div class="Queens p1"></div><div class="Queens p2"></div><div class="Queens p3"></div> | |
| <div class="Bronx p1"></div><div class="Bronx p2"></div><div class="Bronx p3"></div> | |
| <div class="Brooklyn p1"></div><div class="Brooklyn p2"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment