<div id="description">
<h2>Приклад 2: Різні форми многокутників</h2>
<p>Використовується функція polygon() для створення многокутників.</p>
</div>
<div id="result">
<div class="image-container">
<div class="box left"></div>
<div class="box right"></div>
</div>
</div>
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.image-container {
display: flex;
}
.box {
width: 200px;
height: 200px;
margin-right: 20px;
}
.left {
background-color: red;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.right {
background-color: green;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.