_header.scss 591 B

12345678910111213141516171819202122
  1. .wp-site-blocks {
  2. position: relative; // This is needed so that the polygon is stretched across the whole site.
  3. .site-header:before {
  4. content: "";
  5. background-color: var(--wp--custom--color--tertiary);
  6. position: absolute;
  7. bottom: 0;
  8. top: 0;
  9. left: 0;
  10. right: 0;
  11. z-index: -1;
  12. @include break-small-only() {
  13. clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
  14. }
  15. @include break-small() {
  16. clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
  17. }
  18. @include break-large() {
  19. clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
  20. }
  21. }
  22. }