如何为指定圆角卡片设计实现对应的CSS clip-path裁切效果

这个效果可以通过CSS渐变实现，无需复杂的clip-path配置，修改后的完整代码如下： #

完整代码 #

CSS代码 #

.test02 {
  text-align: center;
  color: #fff;
  background-color: orange;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 0.2rem 0;
  /* 让标题栏叠在下方容器上方 */
  position: relative;
  z-index: 1;
}

.test {
  border: 2px solid orange;
  /* 调整padding-top给顶部凹口预留空间 */
  padding: calc(1rem + 12px) 1rem 1rem;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: 5rem;
  /* 用径向渐变模拟左右两个透明凹口+边框描边 */
  background: 
    radial-gradient(circle at left top, transparent 10px, orange 10px, orange 12px, transparent 12px) top left no-repeat,
    radial-gradient(circle at right top, transparent 10px, orange 10px, orange 12px, transparent 12px) top right no-repeat,
    transparent;
  background-size: 12px 12px;
  /* 隐藏默认上边框，后续用伪元素补全中间段 */
  border-top: none;
  position: relative;
  margin-top: -2px;
}
/* 补全两个凹口中间的上边框段 */
.test::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: orange;
}

body {
  background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}

HTML代码 #

<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">

</div>

实现逻辑说明 #

• 用两个径向渐变分别在容器左上角、右上角生成圆形透明凹口，同时保留2px的橙色边框描边
• 隐藏容器原本的上边框，通过伪元素补全两个凹口中间的上边框段
• 标题栏设置更高层级，盖住凹口上方的多余边框部分
  最终效果和设计参考一致：
  

内容的提问来源于stack exchange，提问作者AJ Jones