Pentagon Up shapes design
1 .gg-pentagon-up { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 10px 8 } 9 10 .gg-pentagon-up:before { 11 width: 51% 12 } 13 14 .gg-pentagon-up:after,
15 .gg-pentagon-up:before { 16 content: ' ';
17 position: absolute;
18 top: 0 ;
19 height: 100% 20 } 21 22 .gg-pentagon-up:before { 23 left: -2px ;
24 border-top: 2px solid;
25 border-left: 2px solid;
26 border-bottom: 2px solid;
27 transform: skew(0deg ,-30deg )
28 } 29 30 .gg-pentagon-up:after { 31 right: -2px ;
32 width: 50% ;
33 border-right: 2px solid;
34 border-bottom: 2px solid;
35 border-top: 2px solid;
36 transform: skew(0deg ,30deg )
37 }
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="M12 16 L17 18 V8 L12 6 L7 8 V18 L12 16 ZM9 15.0459 L12 13.8459 L15 15.0459 V9.35407 L12 8.15407 L9 9.35407 V15.0459 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPentagonUp = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 10px ;12 } 13 &:before { 14 width: 51% ;15 } 16 &:after, 17 &:before { 18 content: ' ';19 position: absolute;20 top: 0 ;21 height: 100% ;22 } 23 &:before { 24 left: -2px ;25 border-top: 2px solid;26 border-left: 2px solid;27 border-bottom: 2px solid;28 transform: skew(0deg , -30deg );29 } 30 &:after { 31 right: -2px ;32 width: 50% ;33 border-right: 2px solid;34 border-bottom: 2px solid;35 border-top: 2px solid;36 transform: skew(0deg , 30deg );37 } 38 ` 39 40 export const PentagonUp = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPentagonUp { ...props} ref={ ref} icon-role="pentagon-up" /> 45 </> 46 ) 47 } , 48 ) 49
Pentagon Up turned into a magic pure CSS icon built by using features like: transform, width, height, border-top, border-left, border-bottom, border-right,
