<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaf Shape Puzzle Layout with 6 Pieces</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.puzzle-container {
position: relative;
width: 400px;
height: 600px;
background-image: url('https://w.ladicdn.com/s1600x1600/60988adb4f31f60012f43f81/thot-go-teak-lnmli034wepmfc-20240723154106-7vqhj.jpg');
background-size: cover;
clip-path: path("M200 0 C150 50 50 100 50 250 C50 400 100 450 150 500 C200 550 250 550 300 500 C350 450 400 400 400 250 C400 100 300 50 200 0 Z");
border: 5px solid #333;
overflow: hidden;
}
.puzzle-piece {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: black;
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
box-sizing: border-box;
border: 2px solid #fff;
transition: transform 0.3s ease, background-color 0.3s ease;
background-color: rgba(255, 255, 255, 0.6);
padding: 10px;
}
.puzzle-piece:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.8);
}
/* Positioning each puzzle piece within the leaf shape */
.piece1 { top: 20%; left: 10%; width: 30%; height: 30%; background-position: 10% 20%; }
.piece2 { top: 50%; left: 50%; width: 40%; height: 40%; background-position: 50% 50%; }
.piece3 { top: 10%; left: 60%; width: 20%; height: 20%; background-position: 60% 10%; }
.piece4 { top: 40%; left: 20%; width: 25%; height: 25%; background-position: 20% 40%; }
.piece5 { top: 70%; left: 5%; width: 30%; height: 30%; background-position: 5% 70%; }
.piece6 { top: 75%; left: 60%; width: 30%; height: 20%; background-position: 60% 75%; }
.puzzle-piece span {
background-color: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border-radius: 5px;
}
.puzzle-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
clip-path: path("M200 0 C150 50 50 100 50 250 C50 400 100 450 150 500 C200 550 250 550 300 500 C350 450 400 400 400 250 C400 100 300 50 200 0 Z");
}
</style>
</head>
<body>
<div class="puzzle-container">
<div class="puzzle-piece piece1"><span>Teak</span></div>
<div class="puzzle-piece piece2"><span>Mua Ở Đây</span></div>
<div class="puzzle-piece piece3"><span>Thớt Gỗ</span></div>
<div class="puzzle-piece piece4"><span>Đẹp, Bền</span></div>
<div class="puzzle-piece piece5"><span>-</span></div>
<div class="puzzle-piece piece6"><span>-</span></div>
</div>
</body>
</html>
Giải thích:
clip-path với SVG Path:
Hình dạng chiếc lá được tạo ra với clip-path: path(...). Đường path này có độ cong mượt mà hơn và tạo ra một hình dạng lá tự nhiên hơn, phù hợp với hình ảnh và cảm giác tổng thể.
Lớp phủ nội dung:
Mỗi mảnh ghép (.puzzle-piece) chứa nội dung được làm nổi bật bằng cách sử dụng nền màu trắng bán trong suốt (rgba(255, 255, 255, 0.6)), giúp nội dung dễ đọc hơn. Chữ trên nền trắng có màu đen để tạo độ tương phản cao.
Sắp xếp lộn xộn:
Các mảnh ghép được sắp xếp lộn xộn trên hình chiếc lá, tạo ra cảm giác giống như một trò chơi xếp hình, nhưng với các mảnh ghép chưa hoàn chỉnh. Vị trí và kích thước của mỗi mảnh ghép được đặt thủ công để tạo ra một hiệu ứng thú vị.
Hiệu ứng hover:
Khi người dùng di chuột qua các mảnh ghép, chúng sẽ phóng to nhẹ và làm sáng nền, giúp nội dung trở nên rõ ràng và dễ nhìn hơn.
