DEV Community

Cover image for How to make cutout corner in CSS
bodybody123
bodybody123

Posted on

How to make cutout corner in CSS

#html #css #beginners #material

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

Top comments (0)