# Zigzag

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <span class="zigzag"></span>

`
`

    <span class="zigzag"></span>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $zzheight: 10px;
      $zzhalfheight: calc($zzheight / 2);
      $zzthickness: 130%; // increase to make the line thicker
      $zzoffset: 4px;
      $zzdegree: 135deg;

      @mixin zigzag($bgcolor) {
        position: relative;
        z-index: 1;

        display: block;

        height: $zzheight;

        background: $bgcolor;

        &::after,
        &::before {
          content: '';

          position: absolute;
          right: 0;
          left: 0;

          display: block;
        }

        &::before {
          top: $zzthickness;

          height: ($zzheight - $zzoffset);

          background:
            linear-gradient(-$zzdegree, $zzlinecolor $zzhalfheight, transparent 0) 0 $zzhalfheight,
            linear-gradient($zzdegree, $zzlinecolor $zzhalfheight, transparent 0) 0 $zzhalfheight;
          background-repeat: repeat-x;
          background-position: top left;
          background-size: $zzheight $zzheight;
        }

        &::after {
          top: 100%;

          height: $zzheight;

          background:
            linear-gradient(-$zzdegree, $bgcolor $zzhalfheight, transparent 0) 0 $zzhalfheight,
            linear-gradient($zzdegree, $bgcolor $zzhalfheight, transparent 0) 0 $zzhalfheight;
          background-repeat: repeat-x;
          background-position: top left;
          background-size: $zzheight $zzheight;
        }
      }

      .zigzag,
      %zigzag {
        @include zigzag($zzbgc);
      }

  `
- URL: /components/raw/zigzag/_zigzag.scss
- Filesystem Path: components/05-atoms/visual-elements/zigzag/_zigzag.scss
- Size: 1.2 KB

- Handle: @zigzag
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/visual-elements/zigzag/zigzag.html

No notes defined.