How to create a rectangle shape with notches with CSS?

Question

I want to create a card container with notches on both sides. The outer border of my card should change color on hover. How would you realise it with CSS?

EDIT: 1)The snippet with a container without notches. The major struggle is to create these notches - https://codepen.io/dmitriifs/pen/ZEByXML HTML

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color:#FAFAFA;
}

.container{
  padding-top: 5rem;
  padding-left: 5rem;
}

.coupon {
  height: 161px;
width: 347px;
left: 0px;
top: 0px;
border-radius: 10px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);

}

.union{
height: 11.961060523986816px;
width: 350px;
left: -1.5px;
top: 74.5194091796875px;
border-radius: 0px;
  
}

.polygon-left {
position: absolute;
width: 17px;
height: 10px;
left: 6px;
top: calc(50% - 10px/2 + 13.5px);

background: #FFFFFF;
border-radius: 1px;
transform: matrix(0, -1, -1, 0, 0, 0);
}

<div class="container">
  <div class="coupon">
    <div class="union">
      <div class="polygon-left"></div>
            <div class="polygon-right"></div>
    </div>
  </div> 
</div>

2)The card will contain content and should change border-colour on hover so it seems that it shouldn't be created from multiple elements, should it?

please can you share a snippet of what you've tried so far? thank you! — corn on the cob, Feb 19 '21 at 17:31
Does this "card" need to be able to contain text, or other flowing content? Or could the shape be made from multiple elements? — DBS, Feb 19 '21 at 17:34
@cornonthecob I've attached the snippet with a container without notches. The major struggle is to create these notches. — Dmitriif, Feb 19 '21 at 17:42
@DBS The card will contain content and should change border-colour on hover so it seems that it shouldn't be created from multiple elements, should it? — Dmitriif, Feb 19 '21 at 17:43
you may also use filter:drop-shadow(); to draw a shadow or borders around a shape. a fork of your pen playing with filter : https://codepen.io/gc-nomade/pen/WNoEwBv — G-Cyrillus, Feb 19 '21 at 18:50

D M · Accepted Answer · 2021-02-19T17:55:40.700

Since border will not follow clip-path, you will need a parent element.

Here's an example with a 2px border by shrinking the size of the child and using the background-color of the parent as an apparent border.

.container {
  height: 100px;
  width: 200px;
  background-color: green;
  border-radius: 12px;
  position: relative;
  clip-path: polygon(
    /* Top side */
    0 0, 100% 0%, 

    /* Right notch */
    100% 45%, 95% 50%, 100% 55%, 

    /* Bottom side */
    100% 100%, 0 100%, 

    /* Left notch */
    0 55%,5% 50%, 0 45%);
}

.container:hover {
  background-color: red;
}

.bubble {
  height: calc(100% - 4px);
  width: calc(100% - 4px);  
  position: absolute;
  top: 2px;
  left: 2px;
  line-height: 100px;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  clip-path: polygon(
    /* Top side */
    0 0, 100% 0%, 
    
    /* Right notch */
    100% 44%, 94% 50%, 100% 56%, 
    
    /* Bottom side */
    100% 100%, 0 100%, 
    
    /* Left notch */
    0 56%, 6% 50%, 0 44%);
}

<div class="container">
  <div class="bubble">Hello</div>
</div>

Thank you so much! Is it possible to add some radius to a notch shape with clip-path? — Dmitriif, Feb 19 '21 at 17:54

How to create a rectangle shape with notches with CSS?

1 Answers1