Pentagon Bottom Left shapes design
1 .gg-pentagon-bottom-left { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: rotate(45deg ) scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 10px 8 } 9 10 .gg-pentagon-bottom-left:before { 11 width: 51% 12 } 13 14 .gg-pentagon-bottom-left:after,
15 .gg-pentagon-bottom-left:before { 16 content: ' ';
17 position: absolute;
18 top: 0 ;
19 height: 100% 20 } 21 22 .gg-pentagon-bottom-left: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-bottom-left: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="M13.3301 9.23205 L10 5 L5 13.6603 L8.33013 17.8923 L13.6603 18.6603 L18.6603 10 L13.3301 9.23205 ZM15.4512 11.5583 L12.2531 11.0975 L10.255 8.5583 L7.40908 13.4876 L9.40716 16.0268 L12.6052 16.4876 L15.4512 11.5583 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPentagonBottomLeft = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(45deg ) 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 PentagonBottomLeft = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPentagonBottomLeft { ...props} ref={ ref} icon-role="pentagon-bottom-left" /> 45 </> 46 ) 47 } , 48 ) 49
Pentagon Bottom Left turned into a magic 100% CSS icon created by using properties like: transform, width, height, border-top, border-left, border-bottom, border-right,
