لانه زنبوری کردن المنت
سلام دوستان...
من به یه سایتی برخوردم که لینکش رو در ادامه ی مطلب میذارم...
اگه توی سایت رو نگاه کنید میبینید که المنت ها به صورت لونه زنبوری هستن و اگه روی حاشیه ی اونها کلیک بشه عکس مات شده و...
لطفا اگه میتونید کمک کنید...
لینک سایت
https://templatemo.com/live/templatemo_400_polygon
ثبت پرسش جدید
2
1
من یک کد به زبان ساده براتون نوشتم، چیزی که میخواید رو به دو روش پیاده کردم. کد ساده ای هستش و طولانی بودنش تنها به دلیل تکرارها برای هر کدوم از شش ضلعی ها هستش.
برای اینکه طرح به درستی نمایش داده بشه، خودتون عکسی رو در مسیر معادل آن وارد کنید.
روی واکنشگرایی این طرح کار نکردم و به خودتون می سپارم.
1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>polygon</title>
<style>
.beehive {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
}
.polygon {
width: 200px;
height: 200px;
margin-left: 10px;
clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);
transition: all .6s ease;
}
.polygon:hover {
box-shadow: inset 0 0 0 200px rgba(36,36,36, 0.7);
}
.bg {
background-image: url('img/image1.png');
background-size: cover;
}
.img-res {
max-width: 100%;
height: auto;
}
.mt-40 {
margin-top: -40px;
}
</style>
</head>
<body>
<div class="beehive">
<div class="container">
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
</div>
<div class="container mt-40">
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
</div>
<div class="container mt-40">
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
<div class="polygon">
<img class="img-res" src='img/image1.png'>
</div>
</div>
</div>
<br> <hr> <br>
<div class="beehive">
<div class="container">
<div class="polygon bg"></div>
<div class="polygon bg"></div>
<div class="polygon bg"></div>
<div class="polygon bg"></div>
</div>
<div class="container mt-40">
<div class="polygon bg"></div>
<div class="polygon bg"></div>
<div class="polygon bg"></div>
</div>
<div class="container mt-40">
<div class="polygon bg"></div>
<div class="polygon bg"></div>
<div class="polygon bg"></div>
<div class="polygon bg"></div>
</div>
</div>
<script>
</script>
</body>
</html>1
0