Comment multimedia
1 .gg-comment { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 16px ;
8 border: 2px solid;
9 border-bottom: 0 ;
10 box-shadow:
11 -6px 8px 0 -6px ,
12 6px 8px 0 -6px 13 } 14 15 .gg-comment::after ,
16 .gg-comment::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 8px 22 } 23 24 .gg-comment::before { 25 border: 2px solid;
26 border-top-color: transparent;
27 border-bottom-left-radius: 20px ;
28 right: 4px ;
29 bottom: -6px ;
30 height: 6px 31 } 32 33 .gg-comment::after { 34 height: 2px ;
35 background: currentColor;
36 box-shadow: 0 4px 0 0 ;
37 left: 4px ;
38 top: 4px 39 }
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 d="M17 9 H7 V7 H17 V9 Z" fill="currentColor" /> 9 <path d="M7 13 H17 V11 H7 V13 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M2 18 V2 H22 V18 H16 V22 H14 C11.7909 22 10 20.2091 10 18 H2 ZM12 16 V18 C12 19.1046 12.8954 20 14 20 V16 H20 V4 H4 V16 H12 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledComment = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 16px ;12 border: 2px solid;13 border-bottom: 0 ;14 box-shadow: -6px 8px 0 -6px , 6px 8px 0 -6px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 8px ;23 } 24 &::before { 25 border: 2px solid;26 border-top-color: transparent;27 border-bottom-left-radius: 20px ;28 right: 4px ;29 bottom: -6px ;30 height: 6px ;31 } 32 &::after { 33 height: 2px ;34 background: currentColor;35 box-shadow: 0 4px 0 0 ;36 left: 4px ;37 top: 4px ;38 } 39 ` 40 41 export const Comment = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledComment { ...props} ref={ ref} icon-role="comment" /> 46 </> 47 ) 48 } , 49 ) 50
Comment developed into a magic CSS icon built by applying attributes like: transform, width, height, border, border-bottom, box-shadow, border-top-color, background,
