CSS3菱形到三 Angular 形

Question

我通过将一个正方形旋转 45 度创建了一个菱形:

.shape {
   height: 50px;
   width: 50px;
   transform: rotate(45deg);
}

是否可以通过将顶点向下移动来将其动画化为指向下方的三 Angular 形？

Answer 1

也许您应该定义您希望它如何动画。

一种可能的方式

.shape {
   height: 50px;
   width: 50px;
   transform: rotate(45deg);
   background-image: linear-gradient(-45deg, red 50%, transparent 50%);
   background-size: 200%;
   margin: 20px;
   animation: move 2s infinite linear;
}

@keyframes move {
    from {background-position: 100% 100%;}
      to {background-position:  50%  50%;}
}

<div class="shape"></div>