Skip to content

Instantly share code, notes, and snippets.

@dieseltravis

dieseltravis/CSS-Box-Shadow-lines.html

Last active November 25, 2025 19:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dieseltravis/0a6e12bc58e5f22fd3ad01765e55afdf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dieseltravis/0a6e12bc58e5f22fd3ad01765e55afdf to your computer and use it in GitHub Desktop.
Download ZIP
Drawing lines with CSS box shadow
Raw
CSS-Box-Shadow-lines.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Section + Aside with 'T' and decorative lines</title>
<style>
:root {
/* decorative T-shape dimensions and colors */
--t-height: 40px;
--t-width: 150px;
--t-stroke: 1px;
--t-bg-color: #000;
--t-fg-color: #FFF;
/* reversed for alternating colors */
--t-next-bg-color: #FFF;
--t-next-fg-color: #000;
/* T calculated values */
--t-neg-stroke: calc(var(--t-stroke) * -1);
--t-half-width: calc(var(--t-width) / 2);
--t-half-width-stroke: calc(var(--t-width) / 2 + var(--t-stroke));
--t-left: calc(50% - ((var(--t-width) + var(--t-stroke)) / 2));
/* simple decorative bar dimensions and colors */
--bar-height: 40px;
--bar-stroke: 1px;
--bar-color: #000;
/* bar reversed for alternating colors */
--bar-next-color: #000;
/* bar calculated values */
--bar-left: calc(50% - (var(--bar-stroke) / 2));
}
body {
padding: 50px;
background-color: #666
}
section,
aside {
background-color: #fff;
width: 250px;
padding: 50px;
margin: 0 auto;
}
/* decorative T styles */
.decorative-top-t,
.decorative-bottom-t,
.decorative-t {
background-color: var(--t-bg-color);
color: var(--t-fg-color);
position: relative;
}
.decorative-top-t::before,
.decorative-bottom-t::after,
.decorative-t::before,
.decorative-t::after {
content: '';
display: block;
user-select: none;
position: absolute;
left: var(--t-left);
width: var(--t-half-width);
height: var(--t-height);
}
.decorative-top-t::before,
.decorative-t::before {
top: 0;
/* upside-down T shape at top */
box-shadow:
/* left line */
var(--t-stroke) 0 var(--t-fg-color),
/* vertical line */
0 var(--t-stroke) var(--t-fg-color),
/* shape to hide right box */
var(--t-half-width-stroke) 0 var(--t-bg-color),
/* right line */
var(--t-half-width-stroke) var(--t-stroke) var(--t-fg-color),
/* center dot */
var(--t-half-width) var(--t-stroke) var(--t-fg-color);
}
.decorative-bottom-t::after,
.decorative-t::after {
bottom: 0;
/* T shape at bottom */
box-shadow:
/* left line */
var(--t-stroke) 0 var(--t-fg-color),
/* top vertical line */
0 var(--t-neg-stroke) var(--t-fg-color),
/* shape to hide right box */
var(--t-half-width-stroke) 0 var(--t-bg-color),
/* right line */
var(--t-half-width-stroke) var(--t-neg-stroke) var(--t-fg-color),
/* center dot */
var(--t-half-width) var(--t-neg-stroke) var(--t-fg-color)/*,
/* shape to hide bottom box */
/*0 var(--t-height) var(--t-next-bg-color), */
/* bottom vertical line */
/*var(--t-stroke) var(--t-height) var(--t-next-fg-color)*/;
}
/* decorative bar styles */
.decorative-top-bar,
.decorative-bottom-bar,
.decorative-bar {
color: var(--bar-color);
position: relative;
}
.decorative-top-bar::before,
.decorative-bottom-bar::after,
.decorative-bar::before,
.decorative-bar::after {
content: '';
display: block;
user-select: none;
position: absolute;
left: var(--bar-left);
width: var(--bar-stroke);
height: var(--bar-height);
background-color: var(--bar-color);
}
.decorative-top-bar::before,
.decorative-bar::before {
top: 0;
}
.decorative-bottom-bar::after,
.decorative-bar::after {
bottom: 0;
}
/* hide all decorations for print */
@media print {
.decorative-top-t::before,
.decorative-bottom-t::after,
.decorative-t::before,
.decorative-t::after,
.decorative-top-bar::before,
.decorative-bottom-bar::after,
.decorative-bar::before,
.decorative-bar::after {
display: none;
}
}
</style>
</head>
<body>
<main>
<section>
<h2>This is a plain section</h2>
<p>With some text content.</p>
</section>
<aside class="decorative-t">
<h2>Decorative T shape</h2>
<p>This example bleeds down.</p>
</aside>
<section>
<h2>This is a regular section</h2>
<p>With some text content.</p>
</section>
<aside class="decorative-top-t">
<h2>Decorative top T shape</h2>
<p>This example bleeds down.</p>
</aside>
<section>
<h2>This is a regular section</h2>
<p>With some text content.</p>
</section>
<aside class="decorative-bottom-t">
<h2>Decorative bottom T shape</h2>
<p>This example bleeds down.</p>
</aside>
<section>
<h2>This is a regular section</h2>
<p>With some text content.</p>
</section>
<aside class="decorative-top-t decorative-bottom-t">
<h2>Decorative top and bottom T shapes</h2>
<p>This example bleeds down.</p>
</aside>
<section class="decorative-top-bar decorative-bottom-bar">
<h2>This is a bar section</h2>
<p>With some text content.</p>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment