Я хочу создать анимацию, как на рисунке ниже, но использовать при этом только css:
Я построил треугольник, но не могу построить фон из движущихся треугольников, которые будут перемещаться.
Мой код:
HTML
<div class="container">
<div class="triangle up">
</div>
<div class="triangle down-right">
</div>
<div class=" down-right1">
</div>
<div class="triangle down-left">
</div>
</div>
CSS
.container {
position: relative;
left: 45%;
width: 300px;
height: 250px;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(165,60,255);
background: linear-gradient(90deg, rgba(165,60,255,1) 0%, rgba(98,0,255,1) 100%);
z-index: 999999;
}
.up {
top: 0;
left: auto;
}
.down-right {
top: 100px;
left: 16.5%;
}
.down-right1 {
top: 105px;
left: 24%;
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #c85e5e;
}
.down-left {
top: 100px;
left: -16.5%;
}
Я хочу, чтобы эта анимация запускалась при загрузке страницы.
Свободный перевод вопроса How to create triangle animation use only CSS от участника @qunzi.