CSS3菱形到三角形

Question

我通過旋轉的正方形45度產生的菱形形狀：

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

是否有可能它動畫成通過移動頂點向下指向下方的三角形？

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>