Creating one (only one) TAB

HTML & CSS
16

it appears that the use of SVG has not been
suggested as a possible solutuion for the tab.

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>Tomorrow</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 href="screen.css" rel="stylesheet" media="screen">

</head>
<body>

<h1>To-morrow, and to-morrow, and to-morrow,</h1>

<svg xmlns="http://www.w3.org/2000/svg"  
     viewBox="0 0 1034 170"
 >

<g transform="translate(0,170) scale(0.1,-0.1)"
   fill="#000000" 
   stroke="none"
 >

<path d="M2860 1684 c-73 -20 -127 -53 -179 -109 -39 -42 -91 -134 -91 -161 0
-6 -17 -51 -39 -100 -21 -49 -50 -120 -65 -159 -39 -105 -72 -154 -174 -265
-141 -151 -229 -212 -397 -275 -201 -76 -327 -85 -1227 -92 l-688 -4 0 -255 0
-254 5170 0 5170 0 0 255 0 255 -493 0 c-271 0 -551 5 -623 10 -71 6 -205 14
-299 19 -192 11 -301 32 -440 88 -154 62 -234 120 -376 276 -108 119 -131 156
-184 302 -48 134 -130 288 -178 338 -46 46 -135 97 -223 127 -56 20 -100 20
-2333 19 -1971 0 -2283 -2 -2331 -15z"/>
</g>

<text 
   x="280" 
   y="85"
   font-family="Courier Prime"
   font-size="96"  
   fill="#fff"
 >
    &mdash;Creeps&mdash;
</text>
</svg>

</body>
</html>

screen.css

h1 {
   margin: 1.25rem 0;
   font: normal 2.5rem/2.25rem 'Special Elite', serif;
   text-align: center;
 }
svg {
   display: block;
   width: 50%;
   margin: auto;
 }

You may view it here, if interested…

codepen - full Page View

3 Likes