JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<div class="party">
  <img class="beer" src="https://vzboltay.com/uploads/posts/2019-06/1561197800_s-chem-pit-pivo-retina.jpg" alt="">
<div class="gorilka">
  <img src="https://gas-kvas.com/grafic/uploads/posts/2023-09/1695988975_gas-kvas-com-p-otkritka-so-stakanom-vodki-30.jpg" alt="">
  
</div>

<button class="rest">Відпочити</button>
</div>

CSS

.party{
  position: relative;
  min-width: 1070px
}

.beer{
  position: absolute;
  left: 0;
  top: 0;
  width: 700px;
  clip-path: polygon(96% 9%, 52% 8%, 35% 8%, 34% 64%, 0% 63%, 0% 100%, 24% 100%, 42% 100%, 59% 100%, 61% 100%, 61% 66%, 95% 65%, 96% 28%);
 
}

.gorilka{
  position: absolute;
  right: 60px;
  top: 70px;
  width: 600px;
  clip-path: polygon(100% 11%, 87% 11%, 47% 11%, 46% 62%, 10% 64%, 9% 100%, 24% 100%, 42% 100%, 59% 100%, 100% 100%, 100% 66%, 100% 40%);
}
.gorilka img{
  width: 600px;
  clip-path: polygon(100% 11%, 87% 11%, 47% 11%, 46% 62%, 10% 64%, 9% 100%, 24% 100%, 42% 100%, 59% 100%, 100% 100%, 100% 66%, 100% 4
}

.rest{
  display: none;
  position: absolute;
  right: 0px;
  top: 0px;
}