CSS/HTML动画圈到方形。哪个属性/属性决定了形状？

Question

在codepen from CSS-Tricks上找到的包含例子中，哪个 属性在css代码中决定div的形状？

我了解这里的大部分CSS属性。我只是想知道 决定了形状，以及是否有办法描述/或制作其他形状。例如一颗星星或三角形。

我是新来的css，想学习语言，尤其是 动画技巧。

.element { 
 
    height: 250px; 
 
    width: 250px; 
 
    margin: 0 auto; 
 
    background-color: red; 
 
    animation-name: stretch; 
 
    animation-duration: 1.5s; 
 
    animation-timing-function: ease-out; 
 
    animation-delay: 0; 
 
    animation-direction: alternate; 
 
    animation-iteration-count: infinite; 
 
    animation-fill-mode: none; 
 
    animation-play-state: running; 
 
} 
 

 
@keyframes stretch { 
 
    0% { 
 
    transform: scale(.3); 
 
    background-color: red; 
 
    border-radius: 100%; 
 
    } 
 
    50% { 
 
    background-color: orange; 
 
    } 
 
    100% { 
 
    transform: scale(1.5); 
 
    background-color: yellow; 
 
    } 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="element"></div>

Answer 1

形状在此由border-radius确定，其可用于轮出HTML元素的边缘（转动框成圆角矩形），或有足够的半径（或border-radius: 50%），它可以将方形元素转换为圆形。没有类似的方式来生成其他形状（三角形，星形等），虽然有许多外部和创造性的方式来做到这一点，例如使用borders to make a CSS triangle。