Remove the left and right transparent borders from .tab as I added those to get the mitred effect when the line was not full width as I though it looked better that way.
1 Like
I’m not sure if anyone has suggested radial and conic gradients with masking for this yet, but that’s an option, too. I’m just a bit too lazy to work out the math to adjust it to the more sloping tab look. But changing the --r value to 1.3 em gets pretty close.
2 Likes
I’ma be honest, by the time someone’s worried about “this tab angle is 2 degrees off from the real world”, your page content has lost its battle for relevancy.
Looking good is fine, just make sure you’re not so deep into your design that you forget to take a breath and look around.
3 Likes
Oh I promise you m_hutley there’s enough content in these 3 pages I’ve created to sink a ship!
That did the trick Maestro. It looks great! With some more fiddling you could even create a clipboard; did you notice that? This is the most amazing design you have ever created for me Paul. Thank you!
I guess we lost our SVG member sigh. That would have been nice to have, especially for prickly Internet Explorer (which I can’t test btw). Archibald?
1 Like
I haven’t gone away!
All I did was make an SVG of an image which
you supplied in your post #10.
What do you want me to do differently?
2 Likes
So sorry snadyleiby, I thought I’d lost you. I was hoping you might get the slope of the SVG you posted to look like the one in Paul’s first iteration. It’s the one I like the best. 
I should add however — I agree with him and now have the black border beneath the tab extend all the way to the edge of the row (950px).
~s
Can you direct me to it or show me an image?
1 Like
Sure. Just give me a few . . .
I decided to produce a “clean” image of Paul’s tab — without the border-bottom and free of any text directly on the tab — and then also a cutaway of the actual document, paired with a deliberately-contrasted cyan border. I’m uploading the graphic below. Let me know if you want anything else!
semicodin
OK, it’s 1:30am here so I will work on in about 8hours time.
1 Like
I am sorry for the long delay in replying but I am, for my sins,
an octogenarian and as such I often experience ‘brain farts’
when tackling coding projects. Yours, unfortunately, was no
exception. 
Here is what I eventually came up with…
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 254 151">
<path d="M2252 1489 c-166 -38 -336 -112 -491 -214 -80 -53 -234 -193 -262
-239 -9 -15 -62 -81 -118 -146 -56 -65 -101 -122 -101 -125 0 -4 -36 -49 -80
-100 -44 -51 -80 -97 -80 -102 0 -4 -9 -14 -20 -21 -12 -7 -24 -21 -28 -31
-11 -28 -117 -117 -231 -192 -204 -135 -446 -235 -671 -279 -63 -12 -128 -25
-145 -30 -17 -4 543 -8 1243 -9 l1272 -1 0 755 0 755 -102 -1 c-60 -1 -138 -9
-186 -20z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
</svg>
<div id="text-holder"></div>
<svg viewBox="0 0 254 151">
<path d="M0 755 l0 -755 1273 1 c699 1 1259 5 1242 9 -16 5 -82 18 -145 30
-225 44 -467 144 -671 279 -114 75 -220 164 -231 192 -4 10 -16 24 -28 31 -11
7 -20 17 -20 21 0 5 -36 51 -80 102 -44 51 -80 96 -80 100 0 3 -45 60 -101
125 -56 65 -109 131 -118 146 -28 46 -182 186 -262 239 -225 148 -479 235
-686 235 l-93 0 0 -755z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
</svg>
<div id="text">
—Some Long Title—
</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;
display: flex;
justify-content: center;
width: 60vw; /* adjust this value to suit */
margin: auto;
}
#text-holder {
width: 90%; /* adjust this value to suit */
background-color: #000;
}
#text {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%,-50% );
background-color: transparent;
font-family: 'Courier Prime';
font-size: 2.75vw; /* adjust this value to suit */
color: #fff;
}
@media ( max-width: 56em ){
#container {
width: 80vw; /* adjust this value to suit */
}
#text {
font-size: 3.5vw; /* adjust this value to suit */
}
}
@media ( max-width: 40em ){
#container {
width: 100vw; /* adjust this value to suit */
}
#text {
font-size: 4.5vw; /* adjust this value to suit */
}
}
You may see it here…
Full Page View
1 Like
I am a mere pup (67).
Well friend snadyleiby . . . You have an exquisite design but alas it’s too TALL. When I say follow Paul’s version (which I posted a clean black image of just the tab up a couple of posts) I really mean that Paul just nailed it.
And look how exquisite yours is! Please don’t be offended. I am annoyingly picky when it comes to design and this one must literally trace that image above. I am hopeful that a mere few adjustments could be made to effect its mirror of Paul’s tab and that you won’t give up on me? You do beautiful work snadyleiby and I’d be grateful if you would see the project home? You’re extremely talented, that much is apparent. Let me know.
One update: There is no longer a bottom border beneath the tab — it has been replaced by a one-cell table that I tried everything to avoid resorting to a table but could not get the little link that forms the only content in the cell to make nice with the table directly below it (it kept leaking if anyone’s interested; I’ll post the code on Codepen because it’s political).
Let me know and thank you for your efforts. 
I made a Codepen but it is political. So I don’t want to get in trouble with Sitepoint. Please view it offsite. Just stitch the following together in a new tab if you’re interested. I’m sharing half of the content:
semicodin/pen/yLrQoeZ.
Note: Codepen does not show any of my fonts. 
The svg is not showing at all in ios (and I suspect Safari desktop also but my mac has died so I can’t double check). I think you just need to set a width on the svg (svg{width:100%}) and that makes it show on ios.
I also notice that in all my browsers you are getting one or 2 white vertical lines in the middle block depending on the width of the browser.
Here’s a screenshot from chrome windows.
Its obviously an svg rounding error and should easily be fixed with a negative margin.
#text-holder {
width: 90%;
background-color: #000;
margin: 0 -1px;
}
Otherwise it looks good and more scalable than my version.
1 Like
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
2 Likes
snadyleiby that’s about as mathematically pitch perfect a mirror of Paul’s masterpiece as I think I will ever get! Thank you sir. I’m uploading 2 graphics:
-
A comparison graphic in which I measure the height of yours and Paul’s tabs (very important) and the pitch of the slope as visually teased against a straight line. See how close you came? Very impressive.
-
A screenshot of what your explicit HTML renders when dropped into my page.
Disclaimer
I have never in my life created an SVG that wasn’t previously created as a PNG so you’ll have to be patient with me. This is literally the first time I am pasting SVG code into an HTML document. It’s a thrill!
Following is your code merged with mine up through my first table (was Paul’s border). Yes it does look like Peter Max ha ha. It’s groovy (I think I saw this on a dress in the ’60s lol).
So it’s obviously wrong because you haven’t provided the CSS for your three IDs . . . or, perhaps there isn’t any (?). I don’t have a clue so I’ll wait for more guidance from you (or Paul). Also — I took the liberty of plugging in my actual title to what I interpreted was its container. I intensely dislike the word ‘container’ so I renamed it. Here is the slice of HTML:
<body>
<div class="title">
11 Democratic Senate Seats in 2024
</div>
<div id="svgtab">
<svg viewBox="0 0 254 151">
<path d="M2252 1489 c-166 -38 -336 -112 -491 -214 -80 -53 -234 -193 -262
-239 -9 -15 -62 -81 -118 -146 -56 -65 -101 -122 -101 -125 0 -4 -36 -49 -80
-100 -44 -51 -80 -97 -80 -102 0 -4 -9 -14 -20 -21 -12 -7 -24 -21 -28 -31
-11 -28 -117 -117 -231 -192 -204 -135 -446 -235 -671 -279 -63 -12 -128 -25
-145 -30 -17 -4 543 -8 1243 -9 l1272 -1 0 755 0 755 -102 -1 c-60 -1 -138 -9
-186 -20z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
</svg>
<div id="text-holder"></div>
<svg viewBox="0 0 254 151">
<path d="M0 755 l0 -755 1273 1 c699 1 1259 5 1242 9 -16 5 -82 18 -145 30
-225 44 -467 144 -671 279 -114 75 -220 164 -231 192 -4 10 -16 24 -28 31 -11
7 -20 17 -20 21 0 5 -36 51 -80 102 -44 51 -80 96 -80 100 0 3 -45 60 -101
125 -56 65 -109 131 -118 146 -28 46 -182 186 -262 239 -225 148 -479 235
-686 235 l-93 0 0 -755z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
</svg>
<div id="text">
—Class 1—
</div>
</div>
<table class="table1">
<tr>
<td><div class="whlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a></div>
</td>
</tr>
</table>
I do not understand the HTML code that you have posted. 
There is now only one SVG element required to create the tab.
I just dropped your code into my document and that is what I get. I’m sorry I don’t know why yours works and mine does not. 