A demonstration of 4 different techniques to make an element into a particular geometric shape.
A Pen by Joe Crawford on CodePen.
A demonstration of 4 different techniques to make an element into a particular geometric shape.
A Pen by Joe Crawford on CodePen.
<details class="conical"> | |
<summary>conic-gradients!</summary> | |
<p>4 <code>conic-gradient</code>s in a <code>background</code>.</p> | |
</details> | |
<details class="linear"> | |
<summary>linear gradients!</summary> | |
<p>9 <code>conic-gradient</code>s in a <code>background</code>. Seams may be visible at some resolutions. Especially in Chrome.</p> | |
</details> | |
<details class="clipper"> | |
<summary>clipping path!</summary> | |
<p>1 <code>polygon clip-path</code>.<br />points specified in percentages. Clips the contents.</p> | |
</details> | |
<details class="maskimage"> | |
<summary>svg mask image!</summary> | |
<p>1 <code>svg</code> loaded as a <code>data:image/svg+xml</code> into <code>mask-image.</code> Clips the contents.</p> | |
</details> |
html { | |
height: 100%; | |
} | |
body { | |
height: 98%; | |
display: flex; | |
align-items: center; | |
justify-content: space-around; | |
font-family: sans-serif; | |
background-color: #999; | |
font-size: 1.2rem; | |
gap: 1vw; | |
flex-wrap: wrap; | |
} | |
details { | |
summary { | |
width: min-content; | |
white-space: nowrap; | |
position: absolute; | |
top: 25%; | |
left: 12.5%; | |
text-decoration: underline; | |
text-decoration-style: dotted; | |
text-underline-offset: 0.2rem; | |
} | |
p { | |
margin: 0; | |
position: absolute; | |
top: 40%; | |
left: 15%; | |
text-align: left; | |
width: 75%; | |
} | |
position: relative; | |
box-sizing: border-box; | |
text-align: center; | |
--color: yellow; | |
--bgcolor: darkblue; | |
padding: 0; | |
margin: 0; | |
color: var(--color); | |
width: clamp(200px, 50vh, 500px); | |
box-sizing: border-box; | |
aspect-ratio: 2/1; | |
background: var(--bgcolor); | |
&.clipper { | |
clip-path: polygon( | |
12.5% 0, | |
25% 25%, | |
37.5% 0, | |
50% 25%, | |
62.5% 0, | |
75% 25%, | |
87.5% 0, | |
100% 25%, | |
87.5% 50%, | |
100% 75%, | |
87.5% 100%, | |
75% 75%, | |
62.5% 100%, | |
50% 75%, | |
37.5% 100%, | |
25% 75%, | |
12.5% 100%, | |
0 75%, | |
12.5% 50%, | |
0 25% | |
); | |
&[open] { | |
--bgcolor: black; | |
} | |
} | |
&.conical { | |
background: conic-gradient( | |
at 50% 0, | |
#0000 135deg, | |
var(--c1, var(--bgcolor)) 0 225deg, | |
#0000 0) | |
0 0 / 25% 25% repeat-x, | |
conic-gradient( | |
at 50% 100%, | |
var(--c2, var(--bgcolor)) 45deg, | |
#0000 0 315deg, | |
var(--c2, var(--bgcolor)) 0) | |
bottom 0 right 0 / 25% 25% repeat-x, | |
conic-gradient( | |
from 225deg at 25%, | |
#0000 90deg, | |
var(--c3, var(--bgcolor)) 0) | |
0 50% / 50% 50% no-repeat, | |
conic-gradient( | |
from 45deg at 75% 50%, | |
#0000 90deg, | |
var(--c4, var(--bgcolor)) 0) | |
100% 50% / 50% 50% no-repeat; | |
&[open] { | |
animation: 6s conic-colors steps(5, end) infinite; | |
&:hover { | |
animation: none; | |
} | |
} | |
} | |
// Chrome has some visible seams as this scales | |
&.linear { | |
background: | |
linear-gradient( | |
var(--l1, var(--bgcolor)), | |
var(--l1, var(--bgcolor)) | |
) 50% 50%/ 50% 50% no-repeat, | |
linear-gradient( | |
45deg, | |
#0000 50%, | |
var(--l2, var(--bgcolor)) 0 | |
) bottom 0 left 0 / 37.5% 75% no-repeat, | |
linear-gradient( | |
-45deg, | |
#0000 50%, | |
var(--l3, var(--bgcolor)) 0 | |
) bottom 0 right 0 / 37.5% 75% no-repeat, | |
linear-gradient( | |
135deg, | |
#0000 50%, | |
var(--l4, var(--bgcolor)) 0 | |
) top 0 left 0 / 37.5% 75% no-repeat, | |
linear-gradient( | |
-135deg, | |
#0000 50%, | |
var(--l5, var(--bgcolor)) 0 | |
) top 0 right 0 / 37.5% 75% no-repeat, | |
linear-gradient( | |
135deg, | |
#0000 66.67%, | |
var(--l6, var(--bgcolor)) 0, | |
) 50% 0 / 25% 25% repeat-x, | |
linear-gradient( | |
-135deg, | |
#0000 66.6%, | |
var(--l7, var(--bgcolor)) 0, | |
) 50% 0 / 25% 25% repeat-x, | |
linear-gradient( | |
45deg, | |
#0000 66.6%, | |
var(--l8, var(--bgcolor)) 0, | |
) bottom 0 left 50% / 25% 25% repeat-x, | |
linear-gradient( | |
-45deg, | |
#0000 66.6%, | |
var(--l9, var(--bgcolor))0, | |
) bottom 0 left 50% / 25% 25% repeat-x; | |
animation: none; | |
&[open] { | |
animation: 9s linear-colors steps(10, end) infinite; | |
&:hover { | |
animation: none; | |
} | |
} | |
} | |
&.maskimage { | |
mask-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100%" height="100%" viewBox="0, 0, 96, 48"><g><path d="M0,12 L12,-0 L24,12 L36,0 L48,12 L60,0 L72,12 L84,0 L96,12 L84,24 L96,36 L84,48 L72,36 L60,48 C60,48 48,36 48,36 C48,36 36,48 36,48 L24.315,36 L12,48 L0,36 L11,24 L0,12 z" /></g></svg>'); | |
&[open] { | |
--bgcolor: darkgreen; | |
} | |
} | |
} | |
@keyframes conic-colors { | |
0% { | |
--c1: red; | |
--c2: var(--bgcolor); | |
--c3: var(--bgcolor); | |
--c4: var(--bgcolor); | |
} | |
25% { | |
--c1: var(--bgcolor); | |
--c2: green; | |
--c3: var(--bgcolor); | |
--c4: var(--bgcolor); | |
} | |
50% { | |
--c1: var(--bgcolor); | |
--c2: var(--bgcolor); | |
--c3: orange; | |
--c4: var(--bgcolor); | |
} | |
75% { | |
--c1: var(--bgcolor); | |
--c2: var(--bgcolor); | |
--c3: var(--bgcolor); | |
--c4: black; | |
} | |
100% { | |
--c1: red; | |
--c2: green; | |
--c3: orange; | |
--c4: black; | |
} | |
} | |
@keyframes linear-colors { | |
0% { | |
--l1: red; | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
10% { | |
--l1: var(--bgcolor); | |
--l2: orange; | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
20% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: black; | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
30% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: violet; | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
40% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: brown; | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
50% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: magenta; | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
60% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: pink; | |
--l8: var(--bgcolor); | |
--l9: var(--bgcolor); | |
} | |
70% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: rebeccapurple; | |
--l9: var(--bgcolor); | |
} | |
80% { | |
--l1: var(--bgcolor); | |
--l2: var(--bgcolor); | |
--l3: var(--bgcolor); | |
--l4: var(--bgcolor); | |
--l5: var(--bgcolor); | |
--l6: var(--bgcolor); | |
--l7: var(--bgcolor); | |
--l8: var(--bgcolor); | |
--l9: silver; | |
} | |
100% { | |
--l1: red; | |
--l2: orange; | |
--l3: black; | |
--l4: violet; | |
--l5: brown; | |
--l6: magenta; | |
--l7: pink; | |
--l8: rebeccapurple; | |
--l9: silver; | |
} | |
} |