如何使用 CSS 创建一个带有凹槽的矩形？ [复制]

Question

我想制作一个两边都有凹口的卡片容器。我的卡片的外边框在悬停时应该会改变颜色。您将如何使用 CSS 实现它？

编辑： 1)带有一个没有凹槽的容器的sn-p。主要的斗争是创造这些缺口 - 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）卡片将包含内容，并且应该在悬停时更改边框颜色，所以它似乎不应该由多个元素创建，不是吗？

Answer 1

由于border 不会关注clip-path，所以你will need a parent element。

这是一个带有2px 边框的示例，通过缩小子项的大小并使用父项的background-color 作为明显的边框。

.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>