<css-doodle>
<style>
@grid: 1 / 100vw 100vh;
--s: 64px;
--c1: #EB6841;
--c2: #EDC951;
background-size: calc(@p(--s) * 2) @p;
background-image: @doodle(
:doodle {
@grid: 3x1;
background: linear-gradient(@p(--c2) 50%, @p(--c1) 0)
}
@size: calc(@p(--s) / 2);
clip-path: @shape(points: 4);
background: @pn(--c2, --c1);
translate: @pn(-50% 100%, 0 0, 50% 100%);
justify-self: @pn(auto, center, end)
)
</style>
</css-doodle>
body {
margin: 0;
}
This Pen doesn't use any external CSS resources.