<ul>
<li><div class="a"></div></li>
<li><div class="b"></div></li>
<li><div class="c"></div></li>
<li><div class="d"></div></li>
<li><div class="e"></div></li>
<li><div class="f"></div></li>
<li><div class="g"></div></li>
<li><div class="h"></div></li>
<li><div class="i"></div></li>
<li><div class="j"></div></li>
<li><div class="k"></div></li>
<li><div class="l"></div></li>
<li><div class="m"></div></li>
<li><div class="n"></div></li>
<li><div class="o"></div></li>
<li><div class="p"></div></li>
<li><div class="q"></div></li>
<li><div class="r"></div></li>
<li><div class="s"></div></li>
<li><div class="t"></div></li>
<li><div class="u"></div></li>
<li><div class="v"></div></li>
<li><div class="w"></div></li>
<li><div class="x"></div></li>
<li><div class="y"></div></li>
<li><div class="z"></div></li>
</ul>
$font-color: #aaa;
body {
padding: 0;
}
ul {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
li {
border: 1px dotted #ccc;
border-left: 0;
border-top: 0;
box-sizing: border-box;
height: 165px;
float: left;
list-style: none;
overflow: hidden;
padding-bottom: 20px;
position: relative;
width: 25%;
}
}
ul li div {
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}
// The Letter A
.a {
border-bottom: 2px solid $font-color;
height: 91px;
top: 8px;
width: 58px;
&:before,
&:after {
background: $font-color;
content: '';
height: 125px;
position:absolute;
top: 12px;
width: 2px;
}
&:before {
left: 4px;
transform: skew(-20deg, 0);
}
&:after {
left: 50px;
transform: skew(20deg, 0);
}
}
// The Letter B
.b {
border-left: 2px solid $font-color;
height: 125px;
top: 20px;
width: 60px;
&:before,
&:after {
border-color: $font-color;
border-width: 2px 2px 2px 0;
border-style: solid;
content: '';
position: absolute;
}
&:before {
border-radius: 0 240% 180% 0 / 0 180% 180% 0;
height: 52px;
top: 0;
width: 52px;
}
&:after {
border-radius: 0 180% 220% 0 / 0 180% 180% 0;
bottom: 0;
height: 67px;
width: 66px;
}
}
// The Letter C
.c {
border: 2px solid $font-color;
border-radius: 50%;
height: 121px;
top: 20px;
width: 80px;
&:before {
background: #fff;
content: '';
height: 90px;
position: absolute;
top: 10px;
left: 50px;
transform: rotate(30deg);
width: 90px;
}
}
// The Letter D
.d {
border-left: 2px solid $font-color;
height: 125px;
top: 20px;
width: 60px;
&:before {
border-width: 2px 2px 2px 0;
border-color: $font-color;
border-style: solid;
border-radius: 0 300% 300% 0 / 0 180% 180% 0;
content: '';
height: 121px;
position: absolute;
top: 0;
left: 0;
width: 80px;
}
}
// The Letter E
.e {
border: 2px solid $font-color;
border-right: 0;
height: 125px;
top: 20px;
width: 60px;
&:after {
background: $font-color;
content: '';
height: 2px;
position: absolute;
top: 61px;
width: 30px;
}
}
// The Letter F
.f {
border: 2px solid $font-color;
border-right: 0;
border-bottom: 0;
height: 125px;
top: 20px;
width: 60px;
&:after {
background: $font-color;
content: '';
height: 2px;
position: absolute;
top: 61px;
width: 30px;
}
}
// The Letter G
.g {
border-width: 2px;
border-color: $font-color;
border-style: solid;
border-radius: 50%;
height: 125px;
top: 20px;
width: 80px;
&:before,
&:after {
content: '';
position: absolute;
}
&:before {
background: #fff;
height: 90px;
top: 2px;
left: 40px;
transform: rotate(45deg);
width: 90px;
}
&:after {
border-width: 2px 2px 0 0;
border-color: $font-color;
border-style: solid;
bottom: 0;
right: 6px;
width: 20px;
height: 50px;
}
}
// The Letter H
.h {
border: 2px solid $font-color;
border-bottom: 0;
border-top: 0;
height: 125px;
top: 20px;
width: 60px;
&:after {
background: $font-color;
content: '';
height: 2px;
position: absolute;
top: 61px;
width: 60px;
}
}
// The Letter I
.i {
background: $font-color;
height: 125px;
top: 20px;
width: 2px;
}
// The Letter J
.j {
border-right: 2px solid $font-color;
height: 105px;
top: 20px;
width: 60px;
&:before {
border-width: 0 2px 2px 2px;
border-color: $font-color;
border-style: solid;
border-radius: 50%;
position: absolute;
content:'';
bottom: -25px;
right: -2px;
height: 50px;
width: 50px;
}
&:after {
background: #fff;
content: '';
height: 60px;
position: absolute;
top: 46px;
left: 0;
width: 60px;
}
}
// The Letter K
.k {
border-left: 2px solid $font-color;
height: 125px;
overflow: hidden;
top: 20px;
width: 80px;
&:before {
background: $font-color;
content: '';
height: 84px;
position: absolute;
top: 0;
left: 16px;
transform: skew(-43deg);
width: 2px;
}
&:after {
background: $font-color;
content: '';
height: 90px;
position: absolute;
bottom: 0;
right: 30px;
transform: skew(30deg);
width: 2px;
}
}
// The Letter L
.l {
border: 2px solid $font-color;
border-top: 0;
border-right: 0;
height: 125px;
top: 20px;
width: 60px;
}
// The Letter M
.m {
border-left: 2px solid $font-color;
border-right: 2px solid $font-color;
height: 125px;
overflow: hidden;
top: 20px;
width: 80px;
&:before {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
right: 19px;
transform: skew(-18deg);
width: 2px;
}
&:after {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
left: 19px;
transform: skew(18deg);
width: 2px;
}
}
// The Letter N
.n {
border-left: 2px solid $font-color;
border-right: 2px solid $font-color;
height: 125px;
overflow: hidden;
top: 20px;
width: 80px;
&:after {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
left: 39px;
transform: skew(33deg);
width: 2px;
}
}
// The Letter O
.o {
border: 2px solid $font-color;
border-radius: 75%;
height: 121px;
top: 20px;
width: 80px;
}
// The Letter P
.p {
border-left: 2px solid $font-color;
height: 125px;
top: 20px;
width: 60px;
&:before {
border-color: $font-color;
border-width: 2px 2px 2px 0;
border-style: solid;
border-radius: 0 240% 180% 0 / 0 180% 180% 0;
content: '';
height: 52px;
position: absolute;
top: 0;
width: 60px;
}
}
// The Letter Q
.q {
border: 2px solid $font-color;
border-radius: 75%;
height: 121px;
top: 20px;
width: 80px;
&:after {
background: $font-color;
content: '';
height: 2px;
position: absolute;
bottom: 10px;
left: 40px;
transform: rotate(60deg);
width: 30px;
}
}
// The Letter R
.r {
border-left: 2px solid $font-color;
height: 125px;
top: 20px;
width: 60px;
&:before {
border-color: $font-color;
border-width: 2px 2px 2px 0;
border-style: solid;
border-radius: 0 300% 300% 0 / 0 150% 150% 0;
content: '';
height: 52px;
position: absolute;
top: 0;
width: 60px;
}
&:after {
background: $font-color;
content: '';
height: 2px;
position: absolute;
top: 89px;
left: -10px;
transform: rotate(52deg);
width: 88px;
}
}
// The Letter S
.s {
height: 150px;
top: 20px;
transform: rotate(16deg);
width: 80px;
&:before {
border-width: 2px 0 2px 2px;
border-color: $font-color;
border-style: solid;
border-radius: 220% 0 0 150% / 150% 0 0 100%;
content: '';
height: 54px;
position: absolute;
left: 10px;
transform: rotate(21deg);
width: 38px;
}
&:after {
border-width: 2px 0 2px 2px;
border-color: $font-color;
border-style: solid;
border-radius: 240% 0 0 110% / 140% 0 0 100%;
content: '';
height: 60px;
position: absolute;
top: 70px;
left: 25px;
transform: rotate(201deg);
width: 60px;
}
}
// The Letter T
.t {
background: $font-color;
height: 125px;
top: 20px;
width: 2px;
&:before {
background: $font-color;
content: '';
height: 2px;
position: absolute;
left: -40px;
top: 0;
width: 80px;
}
}
// The Letter U
.u {
border: 2px solid $font-color;
border-bottom: 0;
border-top: 0;
height: 88px;
top: 20px;
width: 80px;
&:before {
border-width: 0 2px 2px 2px;
border-color: $font-color;
border-style: solid;
border-radius: 0 0 150% 150% / 0 0 300% 300%;
content: '';
position: absolute;
bottom: -37px;
left: -2px;
width: 80px;
height: 35px;
}
}
// The Letter V
.v {
height: 125px;
top: 20px;
width: 80px;
&:before,
&:after {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
width: 2px;
}
&:before {
left: 17px;
transform: skew(20deg);
}
&:after {
left: 62px;
transform: skew(-20deg);
}
}
// The Letter W
.w {
height: 125px;
top: 20px;
width: 120px;
&:before {
border-left: 2px solid $font-color;
border-bottom: 2px solid $font-color;
transform: rotate(-25deg);
position: absolute;
content: '';
top: 0;
left: 0;
width: 33px;
height: 125px;
}
&:after {
border-right: 2px solid $font-color;
border-bottom: 2px solid $font-color;
transform: rotate(25deg);
position: absolute;
content: '';
top: 0;
right: 0;
width: 33px;
height: 125px;
}
}
// The Letter X
.x {
height: 125px;
overflow: hidden;
top: 20px;
width: 80px;
&:before {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
left: 39px;
transform: skew(33deg);
width: 2px;
}
&:after {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
left: 39px;
transform: skew(-33deg);
width: 2px;
}
}
// The Letter Y
.y {
top: 20px;
width: 2px;
&:before {
background: $font-color;
transform: skew(28deg);
position: absolute;
content: '';
top: 0;
left: -10px;
width: 2px;
height: 80px;
}
&:after {
background: $font-color;
content: '';
height: 125px;
position: absolute;
top: 0;
right: -21px;
transform: skew(-28deg);
width: 2px;
}
}
// The Letter Z
.z {
border-top: 2px solid $font-color;
border-bottom: 2px solid $font-color;
height: 121px;
top: 20px;
width: 80px;
&:before {
background: $font-color;
content: '';
height: 149px;
position: absolute;
left: 38px;
top: -14px;
transform: rotate(33deg);
width: 2px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.