DEV Community

loading...
Cover image for How to make cutout corner in CSS

How to make cutout corner in CSS

bodybody123
・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

then in the css

.box-container {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));
}
Enter fullscreen mode Exit fullscreen mode

the result:
box cutout with drop shadow

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)
Firefox dev tools

Discussion (0)