Shape Triangle interface
1 .gg-shape-triangle { 2 position: relative;
3 transform: scale(var(--ggs,1 ));
4 width: 22px ;
5 height: 17px ;
6 border-left: 3px solid transparent;
7 border-bottom: 3px solid
8 } 9 10 .gg-shape-triangle,
11 .gg-shape-triangle::before { 12 display: block;
13 box-sizing: border-box;
14 border-right: 3px solid transparent
15 } 16 17 .gg-shape-triangle::before { 18 content: "";
19 position: absolute;
20 width: 20px ;
21 height: 20px ;
22 border-left: 3px solid;
23 border-top: 3px solid;
24 border-bottom: 3px solid transparent;
25 transform: rotate(45deg ) skew(10deg ,10deg );
26 left: -2px ;
27 bottom: -13px 28 }
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="M11.6603 5 L3 20 H20.3205 L11.6603 5 ZM11.6603 11 L8.19615 17 H15.1244 L11.6603 11 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledShapeTriangle = styled.i` 5 & { 6 position: relative;7 transform: scale(var(--ggs, 1 ));8 width: 22px ;9 height: 17px ;10 border-left: 3px solid transparent;11 border-bottom: 3px solid;12 } 13 &, 14 &::before { 15 display: block;16 box-sizing: border-box;17 border-right: 3px solid transparent;18 } 19 &::before { 20 content: '';21 position: absolute;22 width: 20px ;23 height: 20px ;24 border-left: 3px solid;25 border-top: 3px solid;26 border-bottom: 3px solid transparent;27 transform: rotate(45deg ) skew(10deg , 10deg );28 left: -2px ;29 bottom: -13px ;30 } 31 ` 32 33 export const ShapeTriangle = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledShapeTriangle { ...props} ref={ ref} icon-role="shape-triangle" /> 38 </> 39 ) 40 } , 41 ) 42
Shape Triangle ended up a magic 100% CSS icon created by adopting attributes like: transform, width, height, border-left, border-bottom, border-right, border-top,
