<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantastic Clip Paths</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #9c9a9a;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.shape {
position: relative;
width: 300px;
height: 300px;
margin: 20px;
background-image: url('https://codezillaye.com/wp-content/uploads/2024/06/codezillaye.com_.png');
background-size: cover;
background-position: center;
text-align: center;
color: #fff;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.shape::before {
content: "codezilla";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 5px;
}
.shape.star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.shape.polygon {
clip-path: polygon(50% 0%, 75% 20%, 100% 50%, 75% 80%, 50% 100%, 25% 80%, 0% 50%, 25% 20%);
}
.shape.complex {
clip-path: polygon(25% 2%, 45% 2%, 60% 20%, 80% 2%, 95% 25%, 70% 30%, 95% 50%, 70% 65%, 95% 80%, 60% 95%, 45% 70%, 30% 95%, 5% 75%, 15% 50%, 5% 25%);
}
.shape.random {
clip-path: polygon(20% 10%, 80% 10%, 90% 30%, 70% 40%, 90% 60%, 70% 80%, 50% 70%, 30% 80%, 10% 60%, 30% 40%, 10% 30%);
}
</style>
</head>
<body>
<div class="container">
<div class="shape star">
<div class="text">codezilla</div>
</div>
<div class="shape polygon">
<div class="text">codezilla</div>
</div>
<div class="shape complex">
<div class="text">codezilla</div>
</div>
<div class="shape random">
<div class="text">codezilla</div>
</div>
</div>
</body>
</html>