لانه زنبوری کردن المنت
سلام دوستان...
من به یه سایتی برخوردم که لینکش رو در ادامه ی مطلب میذارم...
اگه توی سایت رو نگاه کنید میبینید که المنت ها به صورت لونه زنبوری هستن و اگه روی حاشیه ی اونها کلیک بشه عکس مات شده و...
لطفا اگه میتونید کمک کنید...
لینک سایت
https://templatemo.com/live/templatemo_400_polygon
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
![user-avatar]()
![user-avatar]()
گزارش تخلف
کپی کردن
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