Hi again guys. I wanted to create one — only one — tab on a project I anonymized pursuant to Sitepoint’s policy. The tricky part about this is that I want the one tab to curve out at the bottom-left and bottom-right positions — like you would see on a typical manilla file folder.
My intention then is to continue this “flow” into straight lines — of, say, 20px in height — a respectable 200px on either side — a cutaway, in other words. All the tutorials on this presume you’ll have multiple tabs but I only want the ONE, black, centered, with a couple hundred pixels on either side forming the cutaway (also in black).
Think of it as though you held a center-tabbed manilla file folder in your hand and cut 2” to the left of the flow and 2” to the right. Hope that helps.
i created four empty classes in the CSS for your use (labeled flow1, flow2 etc.) in creating the flow — which is, again, the curve going OUT the base of the tab. As you can see I created the border-radius on the top of the tab already (thank you PAUL).
Or do you think I should just use an image of a tab and not attempt something this ambitious? Thanks guys!
Edit if someone could get me the way that you post code HERE I could clean this up so it’s presentable. Otherwise I have to use Codepen which I frankly would prefer not to use!
semicodin
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>99_PUBLIC FILE TAB ᰄ ONE TAB ONLY!</title>
<style>
body {
width: 950px;
margin-right: 0rem;
margin-top: 2rem;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
.ctr {text-align: center}
.title {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: 'special elite', serif;
font-weight: 400;
font-size: 2.25rem;
line-height: 2.5rem;
}
.flow1 {
}
.flow2 {
}
.flow3 {
}
.flow4 {
}
.hilitea {
text-align: center;
border-radius: 20px 20px 0px 0px;
color: white;
background-color: #000000;
padding-top: .5rem;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
}
.tally {
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 2.38rem;
color: crimson;
}
.notes {
text-align: justify;
color: black;
margin: 2rem 2.5rem 1.25rem 2.5rem;
font-family: 'roboto condensed', sans-serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: 400;
}
.table1 {
width: 100%;
text-align: left;
vertical-align: middle;
border-top: .63rem groove #00ffff; /* cyan */
border-right: .63rem groove #00ffff;
border-bottom: none;
border-left: .63rem groove #00ffff;
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
td {
padding-top: .6rem;
padding-right: .6rem;
padding-bottom: .2rem;
padding-left: .7rem;
}
.table1 tbody tr:nth-child( odd ) {
background-color: #ffffcc; /* pastel yellow */
border-bottom: .19rem solid black;
}
.table1 tbody tr:nth-child( even ) {
background-color: white;
border-bottom: .19rem solid black;
}
/* FILLING OUT THE CELL BORDERS */
.table1 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: left;
}
.table1 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.table2 {
width: 100%;
border: .63rem groove #00ffff; /* cyan */
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
/* DEFINING THE HEADER */
.table2 th {
border: .38rem solid #00ffff;
background-color: black;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
color: white;
font-weight: bold;
padding: .94rem;
}
/* APPLYING THE STRIPES */
.table2 tbody tr:nth-child( odd ) {
background-color: #ffffcc; /* pastel yellow */
border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
background-color: white;
border-bottom: .19rem solid black;
}
/* FILLING OUT THE CELL BORDERS */
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
</style>
</head>
<body>
<div class="title">
To-morrow, and to-morrow, and to-morrow,
</div>
<div class="ctr"><span class="hilitea">—Creeps—</span></div>
<table class="table1">
<tr>
<td colspan="3" style="background: #dddddd">
<span class="tally">in this</span> petty pace<br>
<span class="tally">from</span> day to day
</td>
</tr>
</table>
<table class="table2">
<thead>
<tr>
<th style="color: #00ffff; text-align: center; border-collapse: collapse;">
to
</th>
<th style="color: #00ffff; text-align: center; border-collapse: collapse;">
the last syllable of recorded
</th>
<th width="100px" style="color: #fffff5; text-align: center;">
time</th>
</tr>
</thead>
<tbody>
<tr>
<td>And</td>
<td>all our <i>yesterdays have lighted</i></td>
<td class="cell1">fools</td>
</tr>
<tr>
<td>the</td>
<td><span class="blu">way to</span><br>
dusty death.
</td>
<td>Out! Out!<br>
brief<br>
candle
</td>
</tr>
</table>
<div class="notes">
Life’s but a walking shadow,
<br>
<br>
a poor player that struts and frets his hour upon the stage
<br>
<br>
and then is heard no more.
<br>
<br>
</div>
</body>
</html>
)