Pentagon Bottom Right design shapes
1 .gg-pentagon-bottom-right { 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-right:before { 11 width: 51% 12 } 13 14 .gg-pentagon-bottom-right:after,
15 .gg-pentagon-bottom-right:before { 16 content: ' ';
17 position: absolute;
18 top: 0 ;
19 height: 100% 20 } 21 22 .gg-pentagon-bottom-right: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-right: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="M10.3301 8.23205 L13.6603 4 L18.6603 12.6603 L15.3301 16.8923 L10 17.6603 L5 9 L10.3301 8.23205 ZM8.20908 10.5583 L11.4072 10.0975 L13.4052 7.5583 L16.2512 12.4876 L14.2531 15.0268 L11.055 15.4876 L8.20908 10.5583 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPentagonBottomRight = 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 PentagonBottomRight = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPentagonBottomRight { ...props} ref={ ref} icon-role="pentagon-bottom-right" /> 45 </> 46 ) 47 } , 48 ) 49
Pentagon Bottom Right ended up an amazing pure CSS icon created by adopting properties as follows: transform, width, height, border-top, border-left, border-bottom, border-right,
