Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа </title>
</head>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px ;
grid-template-rows: 200px 200px 200px ;
grid-gap: 20px;
justify-content: center;
}
.container div {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg")
;
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
<body>
<h2>Пример свойства clip-path</h2>