codepens/test-snowflake/dist/index.html

48 lines
1.1 KiB
HTML
Raw Permalink Normal View History

2023-10-06 23:12:53 +02:00
<!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>