mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
31 lines
No EOL
1.2 KiB
HTML
31 lines
No EOL
1.2 KiB
HTML
<div class="container"></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by csemszepp - Website: https://github.com/Afif13 - Name: Afif13 - Tags: simple, material design, pattern */
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
--s: 50px; /* control the size */
|
|
--t: 6px; /* control the thickness */
|
|
--c1: #084c7f;
|
|
--c2: #fef5e9;
|
|
|
|
--_c: #0000 calc(98% - var(--t)), var(--c1) calc(100% - var(--t)) 98%, #0000;
|
|
--_s: calc(2 * var(--s)) calc(5 * var(--s) / 2);
|
|
--_r0: /var(--_s) radial-gradient(calc(var(--s) / 2) at 0 20%, var(--_c));
|
|
--_r1: /var(--_s) radial-gradient(calc(var(--s) / 2) at 100% 20%, var(--_c));
|
|
background: 0 0 var(--_r0),
|
|
calc(-1 * var(--s)) calc(5 * var(--s) / 4) var(--_r0), var(--s) 0 var(--_r1),
|
|
0 calc(5 * var(--s) / 4) var(--_r1),
|
|
conic-gradient(at var(--t) calc(20% + 2 * var(--t)), #0000 75%, var(--c1) 0)
|
|
calc(var(--t) / -2) calc(var(--s) - var(--t)) / var(--s)
|
|
calc(5 * var(--s) / 4),
|
|
repeating-conic-gradient(var(--c2) 0 25%, #0000 0 50%) var(--s)
|
|
calc(var(--s) / -8) / var(--_s),
|
|
conic-gradient(from 90deg at var(--t) var(--t), var(--c2) 25%, var(--c1) 0)
|
|
calc((var(--s) - var(--t)) / 2) calc((var(--s) - var(--t)) / 2) / var(--s)
|
|
calc(5 * var(--s) / 4);
|
|
}
|
|
|
|
</style>
|
|
|