<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
$w: 13em;
$f: 19/13;
$g: 1em;
$n: 7;
$c: #4B384C;
body {
--h: #{$f*$w};
display: grid;
grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));
grid-gap: 1em;
place-content: center;
margin: 0;
min-height: 100vh;
background: #333;
@for $i from 1 through $n {
@media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {
@if $i == $n {
--w: 100%;
--h: #{$f*100vw};
}
@else { --n: #{$n - $i} }
}
}
}
.card {
overflow: hidden;
position: relative;
height: var(--h);
border-radius: 7px;
box-shadow: 2px 2px 17px #000;
background:
linear-gradient(90deg,
#632C65, #E2A9E5);
&:before, &:after {
--p: 0;
--s: calc(1 - 2*var(--p));
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
mask: var(--m);
content: ''
}
&:after { --p: 1 }
&:nth-child(1) {
$s: 19px;
&:before, &:after {
background:
linear-gradient(calc(var(--s)*45deg),
transparent calc(50% - 1px), $c 0, $c calc(50% + 1px), transparent 0)
0 0/ #{$s $s};
--m: linear-gradient(red 50%, transparent 50%)
0 calc(var(--p)*#{$s})/ 100% #{2*$s};
}
}
&:nth-child(2) {
$s: 4em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background:
repeating-linear-gradient(calc(var(--s)*45deg),
$c 0, $c 3px, transparent 0, transparent 13px);
--m: repeating-radial-gradient(circle,
var(--c0) 0, var(--c0) #{.5*$s},
var(--c1) 0, var(--c1) #{$s})
}
}
&:nth-child(3) {
$s: 64px;
&:before, &:after {
background:
repeating-radial-gradient(circle,
$c 0, $c 1px, transparent 2px, transparent 7px, $c 8px)
calc(var(--p)*#{.5*$s}) 0/ #{$s $s};
--m: linear-gradient(red 50%, transparent 0)
0 calc(var(--p)*#{.5*$s})/ 100% #{$s}
}
}
&:nth-child(4) {
$s: 2em;
&:before, &:after {
background:
linear-gradient(calc(var(--s)*45deg),
transparent calc(50% - 1px), $c 0,
$c calc(50% + 1px), transparent 0)
0 0/ #{.25*$s .25*$s};
--m:
linear-gradient(red 50%, transparent 0)
0 0/ #{2*$s 2*$s},
linear-gradient(90deg, red 50%, transparent 0)
calc(var(--p)*#{$s}) 0/ #{2*$s 2*$s};
mask-composite: exclude
}
}
&:nth-child(5) {
$s: 1em;
&:before, &:after {
background:
radial-gradient(circle at calc(var(--p)*100%) 50%,
transparent calc(#{.5*$s} - 1px), $c 0,
$c calc(#{.5*$s} + 1px), transparent 0)
0 0/ #{$s $s};
--m: linear-gradient(red 50%, transparent 50%)
0 calc(var(--p)*#{$s})/ 100% #{2*$s};
}
}
&:nth-child(6) {
$s: .75em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background: linear-gradient(calc(var(--s)*45deg),
transparent calc(50% - 1px), $c 0,
$c calc(50% + 1px), transparent 0) 50%/ #{$s $s};
--m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 45deg, var(--c1) 0%, var(--c1) 90deg)
}
}
&:nth-child(7) {
$s: 1em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background: linear-gradient(calc(var(--s)*45deg),
transparent calc(50% - 1px), $c 0,
$c calc(50% + 1px), transparent 0) 50%/ #{$s $s};
--m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 22.5deg, var(--c1) 0%, var(--c1) 45deg)
}
}
&:nth-child(8) {
$s: 2.5em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background:
linear-gradient(calc(var(--p)*90deg),
$c 1px, transparent 0,
transparent calc(100% - 1px), $c 0)
50% 50%/ #{.14142*$s .14142*$s};
--m:
repeating-linear-gradient(45deg,
red 0, red #{$s},
transparent 0, transparent #{2*$s}),
repeating-linear-gradient(-45deg,
var(--c0) 0, var(--c0) #{$s},
var(--c1) 0, var(--c1) #{2*$s})
}
}
&:nth-child(9) {
$s: 4em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background:
repeating-conic-gradient(from calc(var(--p)*6deg),
$c 0%, $c 2deg,
transparent 0%, transparent 12deg);
--m: repeating-radial-gradient(circle,
var(--c0) 0, var(--c0) #{.5*$s},
var(--c1) 0, var(--c1) #{$s})
}
}
&:nth-child(10) {
$s: 2em;
&:before, &:after {
--c0: hsla(0, 0%, 0%, var(--p));
--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
background:
linear-gradient(calc(var(--p)*90deg),
$c 1px, transparent 0,
transparent calc(100% - 1px), $c 0)
50% 50%/ #{.14142*$s .14142*$s};
--m:
repeating-linear-gradient(45deg,
red 0, red #{$s},
transparent 0, transparent #{2*$s}),
repeating-linear-gradient(-45deg,
var(--c0) 0, var(--c0) #{$s},
var(--c1) 0, var(--c1) #{2*$s});
mask-composite: exclude
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.