Trophy design interface
1 .gg-trophy { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 12px ;
8 border: 2px solid;
9 border-bottom-left-radius: 100px ;
10 border-bottom-right-radius: 100px 11 } 12 13 .gg-trophy::after ,.gg-trophy::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute
18 } 19 20 .gg-trophy::before { 21 box-shadow: inset 0 0 0 2px ,0 2px 0 0 ;
22 bottom: -4px ;
23 width: 6px ;
24 height: 4px ;
25 border-left: 2px solid transparent;
26 border-right: 2px solid transparent;
27 left: 0 28 } 29 30 .gg-trophy::after { 31 width: 16px ;
32 height: 6px ;
33 border-left: 2px solid;
34 border-right: 2px solid;
35 left: -5px ;
36 top: 0 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 15.9 C15.2822 15.4367 17 13.419 17 11 V4 H7 V11 C7 13.419 8.71776 15.4367 11 15.9 V18 H9 V20 H15 V18 H13 V15.9 ZM9 6 H15 V11 C15 12.6569 13.6569 14 12 14 C10.3431 14 9 12.6569 9 11 V6 Z" 12 fill="currentColor" 13 /> 14 <path d="M18 6 H20 V11 H18 V6 Z" fill="currentColor" /> 15 <path d="M6 6 H4 V11 H6 V6 Z" fill="currentColor" /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTrophy = 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: 12px ;12 border: 2px solid;13 border-bottom-left-radius: 100px ;14 border-bottom-right-radius: 100px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 } 23 &::before { 24 box-shadow: inset 0 0 0 2px , 0 2px 0 0 ;25 bottom: -4px ;26 width: 6px ;27 height: 4px ;28 border-left: 2px solid transparent;29 border-right: 2px solid transparent;30 left: 0 ;31 } 32 &::after { 33 width: 16px ;34 height: 6px ;35 border-left: 2px solid;36 border-right: 2px solid;37 left: -5px ;38 top: 0 ;39 } 40 ` 41 42 export const Trophy = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledTrophy { ...props} ref={ ref} icon-role="trophy" /> 47 </> 48 ) 49 } , 50 ) 51
Trophy became a magic pure CSS icon made by applying features like: transform, width, height, border, border-left, border-right,
