<div class="_bg">
<div class="_bg_1-1-1"></div>
<div class="_bg_1-1-2"></div>
<div class="_bg_1-1-3"></div>
</div>
<div class="_bg">
<div class="_bg_1-2-1"></div>
<div class="_bg_1-2-2"></div>
<div class="_bg_1-2-3"></div>
</div>
<div class="_bg">
<div class="_bg_2-1-1"></div>
<div class="_bg_2-1-2"></div>
<div class="_bg_2-1-3-1"></div>
<div class="_bg_2-1-3-2"></div>
</div>
<div class="_bg">
<div class="_bg_2-2-1"></div>
<div class="_bg_2-2-2"></div>
<div class="_bg_2-2-3"></div>
</div>
<div class="_bg">
<div class="_bg_2-3-1"></div>
<div class="_bg_2-3-2"></div>
<div class="_bg_2-3-3"></div>
</div>
<div class="_bg">
<div class="_bg_2-4-1"></div>
<div class="_bg_2-4-2"></div>
<div class="_bg_2-4-3"></div>
</div>
<div class="_bg">
<div class="_bg_2-5-1"></div>
<div class="_bg_2-5-2"></div>
<div class="_bg_2-5-3"></div>
</div>
<div class="_bg">
<div class="_bg_2-6-1"></div>
<div class="_bg_2-6-2"></div>
<div class="_bg_2-6-3"></div>
<div class="_bg_2-6-4"></div>
</div>
/*
** body
*/
body {
background-image: linear-gradient(
45deg,
rgba(128, 128, 128, 0.125) 25%,
transparent 25%,
transparent 75%,
rgba(128, 128, 128, 0.125) 75%
),
linear-gradient(
45deg,
rgba(128, 128, 128, 0.125) 25%,
transparent 25%,
transparent 75%,
rgba(128, 128, 128, 0.125) 75%
);
background-position: calc(50% + 10px) 10px, calc(50% + 20px) 20px;
background-size: 20px 20px;
margin: 0;
}
/*
** body ._bg
*/
._bg {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: 10px;
position: relative;
}
._bg:before {
border-top: dotted 1px;
content: "";
position: absolute;
top: -1px;
right: 0;
left: 0;
}
/*
** body ._bg > [class*="_bg_"]
*/
[class*="_bg_"] {
margin: 10px;
position: relative;
transition: background-position 1s ease 0s;
width: 160px;
height: 160px;
}
[class*="_bg_1-"]:before {
border: solid 2px red;
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
[class*="_bg_2-"]:before {
border-top: solid 2px red;
box-shadow: 0 80px 0 red, 0 160px 0 red;
content: "";
position: absolute;
top: -1px;
right: -1px;
left: -1px;
}
[class*="_bg_2-"]:after {
border-left: solid 2px red;
box-shadow: 80px 0 0 red, 160px 0 0 red;
content: "";
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
}
/*
** body ._bg > [class*="_bg_1-1-"]
*/
._bg_1-1-1 {
background-image: repeating-linear-gradient(
0deg,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
._bg_1-1-2 {
background-image: repeating-linear-gradient(
90deg,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
._bg_1-1-3 {
background-image: repeating-linear-gradient(
0deg,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
),
repeating-linear-gradient(
90deg,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
/*
** body ._bg > [class*="_bg_1-2-"]
*/
._bg_1-2-1 {
background-image: repeating-radial-gradient(
circle at 0 100%,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
._bg_1-2-2 {
background-image: repeating-radial-gradient(
circle at 100% 0,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
._bg_1-2-3 {
background-image: repeating-radial-gradient(
circle at 0 100%,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
),
repeating-radial-gradient(
circle at 100% 0,
transparent 0,
transparent 20px,
currentcolor 20px,
currentcolor 40px
);
}
/*
** body ._bg > [class*="_bg_2-1-"]
*/
._bg_2-1-1 {
background-image: radial-gradient(currentcolor 70.71%, transparent 70.71%);
background-size: 80px 80px;
}
._bg_2-1-2 {
background-image: radial-gradient(
transparent 35.355%,
currentcolor 35.355%,
currentcolor 70.71%,
transparent 70.71%
);
background-size: 80px 80px;
}
._bg_2-1-3-1 {
background-image: radial-gradient(currentcolor 35.355%, transparent 35.355%);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-1-3-2 {
background-image: radial-gradient(currentcolor 35.355%, transparent 35.355%),
radial-gradient(currentcolor 35.355%, transparent 35.355%);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;
}
._bg_2-1-1:hover,
._bg_2-1-2:hover,
._bg_2-1-3-1:hover {
background-position: 160px 160px;
}
._bg_2-1-3-2:hover {
background-position: 160px 160px, 200px 200px;
}
/*
** body ._bg > [class*="_bg_2-2-"]
*/
._bg_2-2-1 {
background-image: linear-gradient(0deg, transparent 50%, currentcolor 50%);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-2-2 {
background-image: linear-gradient(90deg, transparent 50%, currentcolor 50%);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-2-3 {
background-image: linear-gradient(0deg, transparent 50%, currentcolor 50%),
linear-gradient(90deg, transparent 50%, currentcolor 50%);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-2-1:hover,
._bg_2-2-2:hover,
._bg_2-2-3:hover {
background-position: 160px 160px;
}
/*
** body ._bg > [class*="_bg_2-3-"]
*/
._bg_2-3-1 {
background-image: linear-gradient(
45deg,
transparent 25%,
currentcolor 25%,
currentcolor 50%,
transparent 50%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-3-2 {
background-image: linear-gradient(
135deg,
transparent 25%,
currentcolor 25%,
currentcolor 50%,
transparent 50%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-3-3 {
background-image: linear-gradient(
45deg,
transparent 25%,
currentcolor 25%,
currentcolor 50%,
transparent 50%,
transparent 75%,
currentcolor 75%
),
linear-gradient(
135deg,
transparent 25%,
currentcolor 25%,
currentcolor 50%,
transparent 50%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-3-1:hover,
._bg_2-3-2:hover,
._bg_2-3-3:hover {
background-position: 0 160px;
}
/*
** body ._bg > [class*="_bg_2-4-"]
*/
._bg_2-4-1 {
background-image: linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-4-2 {
background-image: linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 40px 40px;
background-size: 80px 80px;
}
._bg_2-4-3 {
background-image: linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
),
linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;
}
._bg_2-4-1:hover {
background-position: 160px 160px;
}
._bg_2-4-2:hover {
background-position: 200px 200px;
}
._bg_2-4-3:hover {
background-position: 160px 160px, 200px 200px;
}
/*
** body ._bg > [class*="_bg_2-5-"]
*/
._bg_2-5-1 {
background-image: linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-5-2 {
background-image: linear-gradient(
135deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 80px 80px;
background-size: 80px 80px;
}
._bg_2-5-3 {
background-image: linear-gradient(
45deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
),
linear-gradient(
135deg,
currentcolor 25%,
transparent 25%,
transparent 75%,
currentcolor 75%
);
background-position: 0 0, 80px 80px;
background-size: 80px 80px;
}
._bg_2-5-1:hover {
background-position: 160px 160px;
}
._bg_2-5-2:hover {
background-position: 240px 240px;
}
._bg_2-5-3:hover {
background-position: 160px 160px, 240px 240px;
}
/*
** body ._bg > [class*="_bg_2-6-"]
*/
._bg_2-6-1 {
background-image: linear-gradient(
45deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-6-2 {
background-image: linear-gradient(
135deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-6-3 {
background-image: linear-gradient(
45deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
),
linear-gradient(
135deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
);
background-position: 0 0;
background-size: 80px 80px;
}
._bg_2-6-4 {
background-image: linear-gradient(
45deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
),
linear-gradient(
135deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
),
linear-gradient(
45deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
),
linear-gradient(
135deg,
currentcolor 12.5%,
transparent 12.5%,
transparent 87.5%,
currentcolor 87.5%
);
background-position: 0 0, 0 0, 40px 40px, 40px 40px;
background-size: 80px 80px;
}
._bg_2-6-1:hover,
._bg_2-6-2:hover,
._bg_2-6-3:hover {
background-position: 160px 160px;
}
._bg_2-6-4:hover {
background-position: 160px 160px, 160px 160px, 200px 200px, 200px 200px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.