<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/css-doodle@0.28.1/css-doodle.min.js