Path Divide design interface
1 .gg-path-divide { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px 8 } 9 10 .gg-path-divide::after ,
11 .gg-path-divide::before { 12 content: "";
13 position: absolute;
14 display: block;
15 box-sizing: border-box;
16 width: 10px ;
17 height: 10px 18 } 19 20 .gg-path-divide::after { 21 border-top: 4px solid;
22 border-left: 4px solid
23 } 24 25 .gg-path-divide::before { 26 background:
27 linear-gradient(to left,
28 currentColor 4px ,transparent 0 )
29 no-repeat 1px 1px /4px 4px ;
30 border-right: 4px solid;
31 border-bottom: 4px solid;
32 bottom: 0 ;
33 right: 0 34 }
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 d="M5 5 H15 V9 H9 V15 H5 V5 Z" fill="currentColor" /> 9 <path d="M9 15 V19 H19 V9 H15 V15 H9 Z" fill="currentColor" /> 10 <path d="M10 10 H14 V14 H10 V10 Z" fill="currentColor" /> 11 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPathDivide = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 } 13 &::after , 14 &::before { 15 content: '';16 position: absolute;17 display: block;18 box-sizing: border-box;19 width: 10px ;20 height: 10px ;21 } 22 &::after { 23 border-top: 4px solid;24 border-left: 4px solid;25 } 26 &::before { 27 background: linear-gradient(to left, currentColor 4px , transparent 0 ) no-repeat 1px 1px /4px 4px ;28 border-right: 4px solid;29 border-bottom: 4px solid;30 bottom: 0 ;31 right: 0 ;32 } 33 ` 34 35 export const PathDivide = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledPathDivide { ...props} ref={ ref} icon-role="path-divide" /> 40 </> 41 ) 42 } , 43 ) 44
Path Divide turned into a 100% CSS icon made by applying properties as follows: transform, width, height, border-left, border-right, border-bottom,
