.a
View Compiled
@c0: salmon;
@c1: difference(salmon, white);
@clip: polygon(
  50% 0, 
  100% 90%,
  0 90%,
  50% 0
);

.a {
  width: 70vmin;
  height: 70vmin;
  #-tri(@c0; transparent);
  clip-path: @clip; 
  display: grid; place-content: center;
  &:before {
    content: '';
    display: block; width: 70vmin; height: 70vmin;
    #-tri(transparent; @c0);
    clip-path: @clip;
  }
  animation: 5s f infinite cubic-bezier(.37,-0.68,.54,1.45);
}
@keyframes f {
  to { background-position-y: -150%; }
}

body {
  display: grid; 
  place-content: center;
  height: 100vh;
  background: @c1;
  filter: drop-shadow(20px 20px 0 #0003)
}

#-tri(@c0; @c1) {
  background-image+: repeating-conic-gradient(at top center,
    @c1 0 0deg,
    @c0 0 30deg,
    @c1 0 60deg,
    @c0 0 120deg,
    @c1 0 150deg,
    @c0 0 180deg
  );
  background-position: center;
  background-size: 70vmin/2 70vmin/2;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.