body {
    height: 100vh;
    display: grid;
    place-items: center;
}

.container {
    position: relative;
    height: 400px;
    width: 400px;
    background: #F5CE51;
    perspective: 350px;
}

.parasol {
    position: absolute;
    top: 8%;
    left: 13%;
    transform-style: preserve-3d;
    transform: rotateX(70deg) rotateY(-15deg);
}

.shadowPole {
    position: absolute;
    width: 6px;
    height: 50px;
    top: 100px;
    left: 97px;
    background: #AB9038;
    transform-origin: 50% 0%;
    transform: translateZ(-150px) rotateZ(-90deg) rotateZ(-15deg);
    box-shadow: 0 0 2px 1px #AB9038;
}

.pole {
    position: absolute;
    width: 6px;
    height: 150px;
    top: 100px;
    left: 97px;
    background: #888;
    transform-origin: 50% 0;
    transform: translateZ(-1px) rotateX(-90deg);
}

.shadowTop {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    transform: translateZ(-150px) translateX(120px) translateY(-40px) scale(0.9);
    animation: rotaTopShadow 5s linear infinite;
}

.parasol .shadowTop .triangle {
    position: absolute;
    top: 100px;
    left: 77px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 98px 25px;
    border-color: transparent transparent #AB9038 transparent;
    transform-origin: 50% 0;
    box-shadow: 0 0 4px 2px #AB9038;
}


.parasol .top .triangle {
    position: absolute;
    top: 100px;
    left: 77px;
    border-style: solid;
    border-width: 0 24px 98px 24px;
    border-color: transparent transparent #fff transparent;
    transform-origin: 50% 0;
    font-size: 5px;
}

.parasol .top {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotaTop 5s linear infinite;
}

.parasol .shadowTop .triangle-1{
    transform: rotateZ(0deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-2{
    transform: rotateZ(30deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-3{
    transform: rotateZ(60deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-4{
    transform: rotateZ(90deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-5{
    transform: rotateZ(120deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-6{
    transform: rotateZ(150deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-7{
    transform: rotateZ(180deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-8{
    transform: rotateZ(210deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-9{
    transform: rotateZ(240deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-10{
    transform: rotateZ(270deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-11{
    transform: rotateZ(300deg) rotateX(-24deg) translateY(-1px);
}

.parasol .shadowTop .triangle-12{
    transform: rotateZ(330deg) rotateX(-24deg) translateY(-1px);
}

.parasol .top .triangle-1 {
    transform: rotateZ(0deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-2 {
    transform: rotateZ(30deg) rotateX(-24deg);
}

.parasol .top .triangle-3 {
    transform: rotateZ(60deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-4 {
    transform: rotateZ(90deg) rotateX(-24deg);
}

.parasol .top .triangle-5 {
    transform: rotateZ(120deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-6 {
    transform: rotateZ(150deg) rotateX(-24deg);
}

.parasol .top .triangle-7 {
    transform: rotateZ(180deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-8 {
    transform: rotateZ(210deg) rotateX(-24deg);
}

.parasol .top .triangle-9 {
    transform: rotateZ(240deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-10 {
    transform: rotateZ(270deg) rotateX(-24deg);
}

.parasol .top .triangle-11 {
    transform: rotateZ(300deg) rotateX(-24deg);
    border-color: transparent transparent red transparent;
}

.parasol .top .triangle-12 {
    transform: rotateZ(330deg) rotateX(-24deg);
}

@keyframes rotaTop {
 from {
    transform: rotateZ(0deg);
 }
 to {
    transform: rotateZ(360deg);
 }
}

@keyframes rotaTopShadow {
 from {
    transform: translateZ(-150px) translateX(120px) translateY(-40px) scale(0.9) rotateZ(0deg);
 }
 to {
    transform: translateZ(-150px) translateX(120px) translateY(-40px) scale(0.9) rotateZ(360deg);
 }
}