Unfortunately, it appears that I was still having ‘brain farts’
when I posted that code.
Hopefully, it is free of them today as the simplified reworking
will show…
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Tab Example</title>
<link href="https://fonts.googleapis.com/css?family=Courier+Prime"
rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Special+Elite"
rel="stylesheet" media="screen">
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>To-morrow, and to-morrow, and to-morrow,</h1>
<div id="container">
<svg viewBox="0 0 412 62" width="100%">
<path d="M800 597 c-137 -47 -183 -84 -336 -270 -148 -182 -226 -240 -397
-296 -37 -13 -67 -25 -67 -27 0 -2 928 -4 2063 -3 l2062 1 -80 27 c-180 63
-249 114 -398 296 -63 77 -125 150 -138 162 -42 38 -142 93 -208 113 -61 19
-98 20 -1250 20 l-1186 -1 -65 -22z"
transform="translate(0,62) scale(0.1,-0.1)"
fill="#000"/>
</svg>
<div id="text">
—Class 3—
</div>
</div>
</body>
</html>screen.css
body {
background-color: #f9f9f9;
font: normal 1em / 1.5 arial, helvetica, sans-serif;
}
h1 {
margin: 1.25rem 0;
font: normal 2rem/2.2rem 'Special Elite', serif;
text-align: center;
}
#container {
position: relative;
width: 11.5em; /* adjust value to suit the tab width */
margin: auto;
}
svg {
display: block;
}
#text {
position: absolute;
width: 100%;
top: 50%;
transform: translate( 0, -50% );
background-color: transparent;
font-family: 'Courier Prime';
font-size: 1.4em; /* adjust value to suit the text width */
font-weight: bold;
text-align: center;
color: #fff;
}Here is the fruit of my labours…
You may also see it here…
Full Page View