let's just get to the point shall we
first we need to make container and some boxes
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
then in the CSS we need to copy the following code
.container {
display: flex;
flex-direction: row;
.box {
margin: 10px;
/* Simple trick to center content */
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
padding: 4px;
background: #f00;
/*This is the meat of the cutout */
clip-path: polygon(
15% 0%,
85% 0%,
100% 15%,
100% 85%,
85% 100%,
15% 100%,
0% 85%,
0% 15%);
}
if you want to add like box-shadow you first need to make container for each box
...
<div class="box-container">
<div class="box">1</div>
</div>
...
then in the css
.box-container {
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));
}
the result:
and that's it, the clip-path is can do more than just a cut out i found this tool that'll prolly help you with clip-path in general https://bennettfeely.com/
firefox has tool too to help you with by opening dev tools ctrl+shift+c(then click the element you want to edit)
Top comments (0)