Pentagon Down design shapes
1 .gg-pentagon-down { 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-down:before { 11 width: 51% 12 } 13 14 .gg-pentagon-down:after,
15 .gg-pentagon-down:before { 16 content: ' ';
17 position: absolute;
18 top: 0 ;
19 height: 100% 20 } 21 22 .gg-pentagon-down: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-down: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 8 L7 6 V16 L12 18.5 L17 16 V6 L12 8 ZM15 8.95407 L12 10.1541 L9 8.95407 V14.7639 L12 16.2639 L15 14.7639 V8.95407 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPentagonDown = 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 PentagonDown = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPentagonDown { ...props} ref={ ref} icon-role="pentagon-down" /> 45 </> 46 ) 47 } , 48 ) 49
Pentagon Down became a wonderful 100% CSS icon created by adopting attributes as follows: transform, width, height, border-top, border-left, border-bottom, border-right,
