console
<div class="taco">
<div class="shell"></div>
<div class="shell2"></div>
<div class="avacado1"></div>
<div class="leaf1"></div>
<div class="leaf4"></div>
<div class="tomato1"></div>
<div class="mayo1"></div>
<div class="avacado2"></div>
<div class="tomato2"></div>
<div class="mayo2"></div>
<div class="tomato3"></div>
<div class="avacado3"></div>
<div class="mayo3"></div>
<div class="mayo4"></div>
<div class="tomato4"></div>
<div class="tomato5"></div>
<div class="leaf2"></div>
<div class="tomato6"></div>
<div class="avacado4"></div>
<div class="avacado5"></div>
<div class="mayo5"></div>
<div class="mayo6"></div>
<div class="avacado6"></div>
<div class="avacado7"></div>
<div class="tomato7"></div>
<div class="tomato8"></div>
<div class="avacado8"></div>
<div class="leaf3"></div>
<div class="avacado9"></div>
<div class="avacado10"></div>
<div class="mayo7"></div>
<div class="tomato9"></div>
<div class="whiteMayo"></div>
<div class="beef1"></div>
<div class="beef2"></div>
</div>
</div>
body {
background-color:
}
.taco {
position: absolute;
top:15%;
left:30%;
opacity: 0.8;
}
.shell {
background-color:
width: 500px;
height: 490px;
position: relative;
top:-30px;
clip-path: polygon(0% 99%, 2% 94%, 4% 88%, 7% 83%, 10% 78%, 13% 73%, 17% 68%, 21% 64%, 26% 61%, 32% 59%, 38% 59%, 44% 58%, 50% 59%, 55% 58%, 61% 59%, 68% 59%, 73% 61%, 76% 65%, 80% 70%, 83% 75%, 85% 80%, 88% 85%, 89% 91%, 93% 96%, 98% 98%, 88% 100%, 82% 99%, 75% 100%, 68% 99%, 61% 99%, 55% 100%, 48% 100%, 42% 100%, 36% 100%, 30% 100%, 24% 100%, 17% 100%, 12% 100%, 6% 99%);
}
.shell2 {
background-color:
width: 400px;
height: 490px;
position: absolute;
bottom:-90px;
left:264px;
transform: rotate(9deg);
z-index: -8;
clip-path: polygon(21% 26%, 29% 26%, 35% 28%, 40% 30%, 45% 34%, 50% 39%, 54% 43%, 57% 49%, 60% 54%, 62% 60%, 61% 67%, 61% 72%, 56% 73%, 53% 68%, 48% 64%, 43% 59%, 38% 53%, 33% 48%, 28% 43%, 24% 38%, 20% 33%, 17% 28%);
}
.leaf1 {
background-color:
width: 250px;
height: 300px;
transform: rotate(-10deg);
position: absolute;
bottom:140px;
left: 45px;
z-index: -7;
clip-path: polygon(9% 67%, 14% 63%, 19% 60%, 25% 59%, 31% 58%, 37% 58%, 43% 57%, 50% 57%, 57% 57%, 64% 57%, 71% 57%, 78% 57%, 85% 55%, 88% 61%, 91% 56%, 86% 65%, 83% 69%, 78% 72%, 72% 74%, 66% 75%, 59% 76%, 52% 77%, 43% 76%, 36% 76%, 30% 76%, 22% 75%, 16% 73%, 12% 71%);
}
.leaf2 {
background-color:
width: 300px;
height: 300px;
transform: rotate(33deg);
position: absolute;
bottom:120px;
left: 245px;
z-index: -7;
clip-path: polygon(9% 67%, 14% 63%, 19% 60%, 25% 59%, 31% 58%, 37% 58%, 43% 57%, 50% 57%, 57% 57%, 64% 57%, 71% 57%, 78% 57%, 85% 55%, 88% 61%, 91% 56%, 86% 65%, 83% 69%, 78% 72%, 72% 74%, 66% 75%, 59% 76%, 52% 77%, 43% 76%, 36% 76%, 30% 76%, 22% 75%, 16% 73%, 12% 71%);
}
.leaf3 {
background-color:
width: 200px;
height: 200px;
transform: rotate(68deg);
position: absolute;
bottom:30px;
left: 379px;
z-index: -7;
clip-path: polygon(9% 67%, 14% 63%, 19% 60%, 25% 59%, 31% 58%, 37% 58%, 43% 57%, 50% 57%, 57% 57%, 64% 57%, 71% 57%, 78% 57%, 85% 55%, 88% 61%, 91% 56%, 86% 65%, 83% 69%, 78% 72%, 72% 74%, 66% 75%, 59% 76%, 52% 77%, 43% 76%, 36% 76%, 30% 76%, 22% 75%, 16% 73%, 12% 71%);
}
.leaf4 {
background-color:
width: 140px;
height: 200px;
position: absolute;
bottom:180px;
left: 220px;
z-index: -7;
clip-path: polygon(9% 67%, 14% 63%, 19% 60%, 25% 59%, 31% 58%, 37% 58%, 43% 57%, 50% 57%, 57% 57%, 64% 57%, 71% 57%, 78% 57%, 85% 55%, 88% 61%, 91% 56%, 86% 65%, 83% 69%, 78% 72%, 72% 74%, 66% 75%, 59% 76%, 52% 77%, 43% 76%, 36% 76%, 30% 76%, 22% 75%, 16% 73%, 12% 71%);
}
.beef1 {
background-color:
width: 100px;
height: 100px;
transform: rotate(90deg);
position: absolute;
left:465px;
bottom: 40px;
z-index: -6;
clip-path: polygon(46% 56%, 53% 55%, 59% 51%, 64% 54%, 64% 60%, 63% 66%, 65% 71%, 70% 68%, 75% 63%, 82% 60%, 88% 61%, 87% 70%, 85% 75%, 88% 79%, 94% 77%, 99% 79%, 98% 87%, 96% 94%, 91% 98%, 84% 99%, 78% 100%, 71% 100%, 65% 99%, 58% 100%, 52% 100%, 45% 100%, 39% 99%, 33% 99%, 27% 99%, 22% 99%, 16% 99%, 9% 100%, 3% 99%, 0% 93%, 0% 87%, 1% 81%, 4% 74%, 7% 68%, 11% 63%, 18% 66%, 21% 73%, 27% 78%, 31% 73%, 33% 68%, 35% 63%, 40% 59%);
}
.beef2 {
background-color:
width: 100px;
height: 100px;
transform: rotate(-94deg);
position: absolute;
left:370px;
bottom: 40px;
z-index: -6;
clip-path: polygon(46% 56%, 53% 55%, 59% 51%, 64% 54%, 64% 60%, 63% 66%, 65% 71%, 70% 68%, 75% 63%, 82% 60%, 88% 61%, 87% 70%, 85% 75%, 88% 79%, 94% 77%, 99% 79%, 98% 87%, 96% 94%, 91% 98%, 84% 99%, 78% 100%, 71% 100%, 65% 99%, 58% 100%, 52% 100%, 45% 100%, 39% 99%, 33% 99%, 27% 99%, 22% 99%, 16% 99%, 9% 100%, 3% 99%, 0% 93%, 0% 87%, 1% 81%, 4% 74%, 7% 68%, 11% 63%, 18% 66%, 21% 73%, 27% 78%, 31% 73%, 33% 68%, 35% 63%, 40% 59%);
}
.avacado1 {
background-color:
height: 100px;
width: 100px;
position: absolute;
top:210px;
left: 65px;
z-index: -1;
clip-path: polygon(20% 99%, 14% 97%, 9% 91%, 8% 84%, 8% 77%, 9% 71%, 9% 65%, 14% 63%, 20% 61%, 26% 58%, 34% 58%, 40% 58%, 46% 61%, 54% 62%, 56% 67%, 58% 72%, 61% 76%, 64% 82%, 65% 88%, 66% 92%, 66% 97%);
}
.mayo1 {
width: 200px;
height: 80px;
position: absolute;
top:180px;
left: 30px;
background-color:
transform: rotate(-30deg);
clip-path: polygon(5% 86%, 11% 88%, 17% 87%, 20% 82%, 24% 77%, 30% 75%, 35% 74%, 41% 76%, 45% 82%, 50% 87%, 56% 87%, 60% 83%, 65% 79%, 70% 74%, 76% 72%, 82% 75%, 85% 79%, 88% 84%, 94% 86%, 99% 85%, 99% 93%, 93% 96%, 86% 95%, 81% 91%, 76% 86%, 70% 90%, 66% 94%, 60% 97%, 52% 98%, 45% 97%, 40% 94%, 35% 90%, 29% 91%, 24% 94%, 19% 97%, 13% 99%, 7% 98%, 3% 95%, 2% 90%);
}
.tomato1 {
width: 70px;
height: 100px;
position: absolute;
top:190px;
left: 50px;
background-color:
transform: rotate(-30deg);
clip-path: polygon(21% 73%, 23% 66%, 28% 60%, 33% 56%, 39% 52%, 46% 51%, 53% 50%, 60% 50%, 67% 51%, 71% 55%, 76% 60%, 79% 64%, 80% 71%, 81% 74%, 76% 77%, 72% 73%, 68% 69%, 63% 65%, 57% 63%, 51% 63%, 46% 64%, 41% 66%, 36% 68%, 33% 72%, 28% 76%);
}
.avacado2 {
background-color:
height: 50px;
width: 50px;
position: absolute;
top:210px;
left: 95px;
z-index: -1;
border-radius: 79% 20% 14% 11% / 79% 20% 14% 11%;
}
.tomato2 {
width: 30px;
height: 30px;
position: absolute;
top:200px;
left: 140px;
background-color:
transform: rotate(-30deg);
z-index: -4;
}
.mayo2 {
width: 200px;
height: 80px;
position: absolute;
top:170px;
left: 130px;
z-index: -3;
background-color:
transform: rotate(20deg);
clip-path: polygon(4% 76%, 4% 69%, 8% 64%, 12% 59%, 18% 57%, 25% 57%, 30% 62%, 36% 68%, 41% 72%, 49% 73%, 56% 69%, 63% 69%, 69% 71%, 75% 73%, 81% 75%, 88% 76%, 94% 77%, 99% 80%, 98% 85%, 90% 84%, 83% 84%, 76% 83%, 69% 80%, 62% 79%, 55% 81%, 49% 83%, 41% 82%, 35% 79%, 29% 75%, 23% 71%, 17% 71%, 13% 76%, 6% 81%);
}
.tomato3 {
width: 40px;
height: 40px;
position: absolute;
top:180px;
left: 210px;
background-color:
transform: rotate(-60deg);
z-index: -4;
}
.mayo3 {
width: 200px;
height: 80px;
position: absolute;
top:150px;
left: 180px;
z-index: -3;
background-color:
clip-path: polygon(10% 71%, 13% 65%, 16% 60%, 21% 59%, 26% 61%, 29% 68%, 31% 72%, 37% 71%, 38% 65%, 40% 58%, 47% 57%, 52% 60%, 55% 65%, 56% 71%, 61% 74%, 67% 74%, 70% 71%, 75% 69%, 80% 67%, 86% 67%, 90% 68%, 92% 74%, 93% 80%, 89% 85%, 84% 81%, 77% 80%, 74% 85%, 69% 86%, 62% 86%, 55% 85%, 51% 80%, 47% 78%, 41% 80%, 36% 83%, 31% 85%, 26% 82%, 21% 79%, 16% 78%, 11% 82%, 6% 79%, 8% 75%);
}
.tomato4 {
width: 30px;
height: 30px;
position: absolute;
top:220px;
left: 250px;
background-color:
transform: rotate(10deg);
z-index: -4;
}
.tomato5 {
width: 30px;
height: 30px;
position: absolute;
top:180px;
left: 290px;
background-color:
transform: rotate(-30deg);
z-index: -4;
}
.tomato6 {
width: 30px;
height: 30px;
position: absolute;
top:220px;
left: 350px;
background-color:
transform: rotate(-30deg);
z-index: -4;
}
.mayo3 {
width: 200px;
height: 80px;
position: absolute;
top:190px;
left: 180px;
z-index: -3;
background-color:
transform: rotate(5deg);
clip-path: polygon(6% 72%, 11% 68%, 17% 66%, 23% 66%, 31% 65%, 38% 65%, 45% 65%, 51% 65%, 56% 66%, 63% 65%, 69% 62%, 74% 59%, 81% 59%, 85% 60%, 88% 65%, 86% 70%, 79% 70%, 73% 70%, 68% 72%, 62% 74%, 55% 75%, 49% 74%, 42% 74%, 35% 74%, 29% 75%, 23% 75%, 17% 75%, 11% 77%, 7% 76%);
}
.avacado3 {
background-color:
height: 40px;
width: 40px;
position: absolute;
top:170px;
left: 245px;
z-index: -5;
border-radius: 100% 17% 14% 24% / 100% 17% 14% 24%;
}
.mayo4 {
width: 200px;
height: 80px;
position: absolute;
top:150px;
left: 180px;
z-index: -3;
background-color:
clip-path: polygon(7% 63%, 13% 62%, 18% 62%, 24% 62%, 30% 62%, 36% 62%, 41% 62%, 47% 62%, 53% 62%, 58% 65%, 61% 70%, 66% 72%, 74% 74%, 81% 73%, 85% 68%, 90% 65%, 96% 67%, 96% 73%, 93% 79%, 88% 81%, 81% 83%, 75% 84%, 68% 85%, 61% 82%, 55% 79%, 50% 76%, 44% 74%, 39% 75%, 33% 74%, 27% 74%, 21% 73%, 14% 72%, 7% 71%, 4% 67%);
}
.avacado4 {
background-color:
height: 100px;
width: 100px;
position: absolute;
top:150px;
left: 295px;
z-index: -5;
transform: rotate(20deg);
clip-path: polygon(23% 69%, 30% 67%, 35% 64%, 39% 59%, 42% 55%, 45% 49%, 45% 41%, 45% 35%, 51% 35%, 58% 38%, 62% 44%, 65% 51%, 66% 57%, 67% 64%, 65% 69%, 60% 73%, 55% 76%, 49% 77%, 42% 77%, 36% 76%, 30% 76%, 25% 73%);
}
.avacado5 {
background-color:
height: 30px;
width: 30px;
position: absolute;
top:230px;
left: 310px;
z-index: -5;
transform: rotate(220deg);
border-radius: 100% 17% 14% 24% / 100% 17% 14% 24%;
}
.mayo5 {
width: 140px;
height: 80px;
position: absolute;
top:210px;
left: 330px;
background-color:
transform: rotate(20deg);
z-index: -2;
clip-path: polygon(5% 86%, 11% 88%, 17% 87%, 20% 82%, 24% 77%, 30% 75%, 35% 74%, 41% 76%, 45% 82%, 50% 87%, 56% 87%, 60% 83%, 65% 79%, 70% 74%, 76% 72%, 82% 75%, 85% 79%, 88% 84%, 94% 86%, 99% 85%, 99% 93%, 93% 96%, 86% 95%, 81% 91%, 76% 86%, 70% 90%, 66% 94%, 60% 97%, 52% 98%, 45% 97%, 40% 94%, 35% 90%, 29% 91%, 24% 94%, 19% 97%, 13% 99%, 7% 98%, 3% 95%, 2% 90%);
}
.mayo6 {
width: 60px;
height: 40px;
position: absolute;
top:220px;
left: 365px;
background-color:
transform: rotate(-35deg);
z-index: -2;
clip-path: polygon(5% 86%, 11% 88%, 17% 87%, 20% 82%, 24% 77%, 30% 75%, 35% 74%, 41% 76%, 45% 82%, 50% 87%, 56% 87%, 60% 83%, 65% 79%, 70% 74%, 76% 72%, 82% 75%, 85% 79%, 88% 84%, 94% 86%, 99% 85%, 99% 93%, 93% 96%, 86% 95%, 81% 91%, 76% 86%, 70% 90%, 66% 94%, 60% 97%, 52% 98%, 45% 97%, 40% 94%, 35% 90%, 29% 91%, 24% 94%, 19% 97%, 13% 99%, 7% 98%, 3% 95%, 2% 90%);
}
.avacado6 {
background-color:
height: 30px;
width: 30px;
position: absolute;
top:195px;
left: 360px;
z-index: -5;
transform: rotate(220deg);
border-radius: 5px;
}
.avacado7 {
background-color:
height: 120px;
width: 120px;
position: absolute;
top:155px;
left: 360px;
z-index:-5;
clip-path: polygon(21% 68%, 26% 65%, 31% 60%, 37% 57%, 44% 53%, 51% 51%, 56% 50%, 56% 55%, 55% 62%, 53% 68%, 49% 72%, 43% 76%, 35% 79%, 30% 79%, 23% 79%, 17% 78%, 17% 72%);
}
.tomato7 {
width: 30px;
height: 30px;
position: absolute;
top:250px;
left: 415px;
background-color:
transform: rotate(-30deg);
z-index: -4;
}
.tomato8 {
width: 40px;
height: 20px;
position: absolute;
top:285px;
left: 370px;
background-color:
transform: rotate(30deg);
z-index: -4;
}
.avacado8 {
background-color:
height: 130px;
width: 130px;
position: absolute;
top:195px;
left: 417px;
transform: rotate(30deg);
z-index: -8;
clip-path: polygon(26% 74%, 28% 69%, 30% 64%, 32% 59%, 34% 55%, 39% 55%, 44% 58%, 49% 62%, 48% 67%, 42% 69%, 40% 74%, 40% 78%, 35% 78%, 30% 77%);
}
.avacado9 {
background-color:
height: 180px;
width: 180px;
position: absolute;
top:245px;
left: 345px;
transform: rotate(240deg);
clip-path: polygon(26% 74%, 28% 69%, 30% 64%, 32% 59%, 34% 55%, 39% 55%, 44% 58%, 49% 62%, 48% 67%, 42% 69%, 40% 74%, 40% 78%, 35% 78%, 30% 77%);
}
.avacado10 {
background-color:
height: 140px;
width: 140px;
position: absolute;
top:280px;
left: 338px;
transform: rotate(235deg);
z-index: -3;
clip-path: polygon(26% 74%, 28% 69%, 30% 64%, 32% 59%, 34% 55%, 39% 55%, 44% 58%, 49% 62%, 48% 67%, 42% 69%, 40% 74%, 40% 78%, 35% 78%, 30% 77%);
}
.mayo7 {
width: 120px;
height: 120px;
position: absolute;
top:250px;
left: 365px;
background-color:
transform: rotate(10deg);
clip-path: polygon(28% 57%, 28% 62%, 33% 68%, 38% 71%, 44% 72%, 51% 72%, 56% 68%, 60% 64%, 63% 59%, 70% 58%, 74% 58%, 79% 58%, 84% 53%, 79% 48%, 71% 48%, 66% 47%, 60% 50%, 55% 53%, 52% 58%, 47% 62%, 41% 59%, 38% 56%, 34% 51%, 29% 51%);
}
.tomato9 {
width: 30px;
height: 30px;
position: absolute;
top:300px;
left: 450px;
background-color:
transform: rotate(-30deg);
z-index: -4;
}
.whiteMayo {
width: 110px;
height: 170px;
position: absolute;
top:285px;
left: 405px;
background-color:
transform: rotate(-10deg);
z-index: -4;
clip-path: polygon(17% 50%, 24% 50%, 31% 50%, 37% 51%, 40% 54%, 43% 58%, 47% 63%, 53% 66%, 57% 64%, 60% 60%, 63% 56%, 67% 50%, 73% 49%, 82% 49%, 88% 46%, 86% 40%, 80% 40%, 73% 39%, 65% 39%, 56% 40%, 48% 40%, 39% 40%, 32% 40%, 27% 40%, 21% 40%, 17% 44%);
}