How to make cutout corner in CSS

bodybody123 — Thu, 05 Aug 2021 06:05:22 +0000

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)

DEV Community: bodybody123

How to make cutout corner in CSS

let's just get to the point shall we