Shape Zigzag shapes design
1 .gg-shape-zigzag,
2 .gg-shape-zigzag::after ,
3 .gg-shape-zigzag::before { 4 display: block;
5 box-sizing: border-box;
6 width: 5px ;
7 height: 7px ;
8 border-left: 2px solid;
9 border-bottom: 2px solid
10 } 11 12 .gg-shape-zigzag { 13 margin-left: -18px ;
14 transform: rotate(-49deg ) scale(var(--ggs,1 ));
15 position: relative
16 } 17 18 .gg-shape-zigzag::after ,
19 .gg-shape-zigzag::before { 20 content: "";
21 position: absolute;
22 left: 2px ;
23 top: 5px 24 } 25 26 .gg-shape-zigzag::before { 27 left: 7px ;
28 top: 10px 29 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M2.31212 9 L1 10.5094 L4.77355 13.7897 L6.28297 15.1018 L7.59509 13.5924 L9.13456 11.8214 L11.3988 13.7897 L12.9082 15.1018 L14.2203 13.5924 L15.7584 11.823 L18.0209 13.7897 L19.5303 15.1018 L20.8424 13.5924 L22.8106 11.3283 L21.3012 10.0162 L19.333 12.2803 L15.5594 9 L14.2473 10.5094 L14.249 10.5109 L12.7109 12.2803 L8.93736 9 L8.05395 10.0163 L6.08567 12.2803 L2.31212 9 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledShapeZigzag = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 5px ;11 height: 7px ;12 border-left: 2px solid;13 border-bottom: 2px solid;14 } 15 & { 16 margin-left: -18px ;17 transform: rotate(-49deg ) scale(var(--ggs, 1 ));18 position: relative;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 left: 2px ;25 top: 5px ;26 } 27 &::before { 28 left: 7px ;29 top: 10px ;30 } 31 ` 32 33 export const ShapeZigzag = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledShapeZigzag { ...props} ref={ ref} icon-role="shape-zigzag" /> 38 </> 39 ) 40 } , 41 ) 42
Shape Zigzag turned into a magic CSS icon built by applying features as follows: .gg-shape-zigzag, width, height, border-left, border-bottom, transform,
