Pen content interface design
1 .gg-pen { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: rotate(-45deg ) scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 4px ;
8 border-right: 2px solid transparent;
9 box-shadow:
10 0 0 0 2px ,
11 inset -2px 0 0 ;
12 border-top-right-radius: 1px ;
13 border-bottom-right-radius: 1px ;
14 margin-right: -2px 15 } 16 17 .gg-pen::after ,
18 .gg-pen::before { 19 content: "";
20 display: block;
21 box-sizing: border-box;
22 position: absolute
23 } 24 25 .gg-pen::before { 26 background: currentColor;
27 border-left: 0 ;
28 right: -6px ;
29 width: 3px ;
30 height: 4px ;
31 border-radius: 1px ;
32 top: 0 33 } 34 35 .gg-pen::after { 36 width: 8px ;
37 height: 7px ;
38 border-top: 4px solid transparent;
39 border-bottom: 4px solid transparent;
40 border-right: 7px solid;
41 left: -11px ;
42 top: -2px 43 }
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="M21.2635 2.29289 C20.873 1.90237 20.2398 1.90237 19.8493 2.29289 L18.9769 3.16525 C17.8618 2.63254 16.4857 2.82801 15.5621 3.75165 L4.95549 14.3582 L10.6123 20.0151 L21.2189 9.4085 C22.1426 8.48486 22.338 7.1088 21.8053 5.99367 L22.6777 5.12132 C23.0682 4.7308 23.0682 4.09763 22.6777 3.70711 L21.2635 2.29289 ZM16.9955 10.8035 L10.6123 17.1867 L7.78392 14.3582 L14.1671 7.9751 L16.9955 10.8035 ZM18.8138 8.98525 L19.8047 7.99429 C20.1953 7.60376 20.1953 6.9706 19.8047 6.58007 L18.3905 5.16586 C18 4.77534 17.3668 4.77534 16.9763 5.16586 L15.9853 6.15683 L18.8138 8.98525 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M2 22.9502 L4.12171 15.1717 L9.77817 20.8289 L2 22.9502 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPen = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(-45deg ) scale(var(--ggs, 1 ));10 width: 14px ;11 height: 4px ;12 border-right: 2px solid transparent;13 box-shadow: 0 0 0 2px , inset -2px 0 0 ;14 border-top-right-radius: 1px ;15 border-bottom-right-radius: 1px ;16 margin-right: -2px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 } 25 &::before { 26 background: currentColor;27 border-left: 0 ;28 right: -6px ;29 width: 3px ;30 height: 4px ;31 border-radius: 1px ;32 top: 0 ;33 } 34 &::after { 35 width: 8px ;36 height: 7px ;37 border-top: 4px solid transparent;38 border-bottom: 4px solid transparent;39 border-right: 7px solid;40 left: -11px ;41 top: -2px ;42 } 43 ` 44 45 export const Pen = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledPen { ...props} ref={ ref} icon-role="pen" /> 50 </> 51 ) 52 } , 53 ) 54
Pen developed into a wonderful 100% CSS icon made by using properties as follows: transform, width, height, border-right, box-shadow, border-left, border-radius, border-top, border-bottom,
