48 lines
1.1 KiB
HTML
48 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en" >
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<title>CodePen - Test Snowflake</title>
|
||
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
||
|
</head>
|
||
|
<body>
|
||
|
<!-- partial:index.partial.html -->
|
||
|
<css-doodle click-to-update>
|
||
|
<style>
|
||
|
@grid: 8x6 / 100vmin auto;
|
||
|
background: @doodle(
|
||
|
:doodle {
|
||
|
@grid: 6x1 / 100%;
|
||
|
--polygon: polygon(
|
||
|
50% 0,
|
||
|
@m(@r(2, 10), (@r(40%, 80%) @r(20%, 60%))),
|
||
|
50% 100%,
|
||
|
@m(@r(2, 10), (@r(50%, 100%) @r(60%, 80%))),
|
||
|
108% 100%,
|
||
|
@m(@r(2, 10), (@r(50%, 100%) @r(20%, 100%)))
|
||
|
);
|
||
|
}
|
||
|
clip-path: @shape(
|
||
|
points: 3; rotate: 30
|
||
|
);
|
||
|
@offset: @plot(
|
||
|
r: .49; dir: auto -90
|
||
|
);
|
||
|
@size: 50%;
|
||
|
:before, :after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
inset: 0;
|
||
|
clip-path: var(--polygon);
|
||
|
transform: rotateY(@pn(180deg, 0));
|
||
|
background: #fff;
|
||
|
}
|
||
|
);
|
||
|
</style>
|
||
|
</css-doodle>
|
||
|
<!-- partial -->
|
||
|
<script src='https://unpkg.com/css-doodle@0.24.1/css-doodle.min.js'></script>
|
||
|
</body>
|
||
|
</html>
|