Zigzag

<span class="zigzag"></span>
<span class="zigzag"></span>
/* No context defined. */
  • Content:
    $zzheight: 10px;
    $zzhalfheight: ($zzheight / 2);
    $zzthickness: 130%; // increase to make the line thicker
    $zzoffset: 4px;
    $zzdegree: 135deg;
    
    .zigzag,
    %zigzag {
      position: relative;
      z-index: 1;
      display: block;
      height: $zzheight;
      background: $zzbgc;
    
      &::after,
      &::before {
        position: absolute;
        right: 0;
        left: 0;
        display: block;
        content: "";
      }
    
      &::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-position: top left;
        background-repeat: repeat-x;
        background-size: $zzheight $zzheight;
      }
    
      &::after {
        top: 100%;
        height: $zzheight;
        background: linear-gradient(-$zzdegree, $zzbgc $zzhalfheight, transparent 0) 0 $zzhalfheight,
          linear-gradient($zzdegree, $zzbgc $zzhalfheight, transparent 0) 0 $zzhalfheight;
        background-position: top left;
        background-repeat: repeat-x;
        background-size: $zzheight $zzheight;
      }
    }
    
  • URL: /components/raw/zigzag/_zigzag.scss
  • Filesystem Path: components/05-atoms/visual-elements/zigzag/_zigzag.scss
  • Size: 1.1 KB

No notes defined.