Arrows H arrows interface
1 .gg-arrows-h { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 10px ;
8 background:
9 linear-gradient(
10 to left,
11 currentColor 15px ,transparent 0 )
12 no-repeat 2px 4px /6px 2px ,
13 linear-gradient(
14 to left,
15 currentColor 15px ,transparent 0 )
16 no-repeat 12px 4px /6px 2px 17 } 18 .gg-arrows-h::after ,
19 .gg-arrows-h::before { 20 content: "";
21 display: block;
22 box-sizing: border-box;
23 position: absolute;
24 width: 6px ;
25 height: 6px ;
26 transform: rotate(45deg );
27 top: 2px 28 } 29 .gg-arrows-h::after { 30 border-bottom: 2px solid;
31 border-left: 2px solid;
32 left: 1px 33 } 34 .gg-arrows-h::before { 35 border-top: 2px solid;
36 border-right: 2px solid;
37 right: 1px 38 }
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 d="M5.65698 9.17157 L4.24276 7.75735 L0.00012207 12 L4.24276 16.2426 L5.65698 14.8284 L3.82858 13 H10.0001 V11 H3.82851 L5.65698 9.17157 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14.0001 11 V13 H20.1716 L18.3432 14.8284 L19.7574 16.2426 L24.0001 12 L19.7574 7.75735 L18.3432 9.17157 L20.1717 11 H14.0001 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledArrowsH = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 10px ;12 background: linear-gradient(to left, currentColor 15px , transparent 0 ) no-repeat 2px 4px /6px 2px ,13 linear-gradient(to left, currentColor 15px , transparent 0 ) no-repeat 12px 4px /6px 2px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 6px ;22 height: 6px ;23 transform: rotate(45deg );24 top: 2px ;25 } 26 &::after { 27 border-bottom: 2px solid;28 border-left: 2px solid;29 left: 1px ;30 } 31 &::before { 32 border-top: 2px solid;33 border-right: 2px solid;34 right: 1px ;35 } 36 ` 37 38 export const ArrowsH = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledArrowsH { ...props} ref={ ref} icon-role="arrows-h" /> 43 </> 44 ) 45 } , 46 ) 47
Arrows H developed into an amazing CSS icon created by practicing features like: transform, width, height, background, border-left, border-right,
