我将如何为此设计制作剪辑路径？

Question

.test02 {
  text-align: center;
  color: #fff;
  background-color: orange;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 0.2rem 0;
}

.test {
  border: 2px solid orange;
  padding: 1rem;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: 5rem;
}

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

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

</div>

我知道我想为此制作一个剪辑路径，但我不知道如何做。这种类型的 CSS 样式对我来说有点高级。我可以做一个很好的边框，但不知道如果有意义的话，你怎么能把边框从里到外做。

Answer 1

您可以使用以下 svg（添加额外的白色笔触，以防您使用深色主题）来剪掉不需要的部分并保留背景：

然后使用:before, :after 将这个剪裁的 div 放在左右两边。
也可以使用transform: scaleX(-1)来翻转右上角。

.test02 {
  text-align: center;
  color: #fff;
  background-color: orange;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 0.2rem 0;
}

.test {
  border: 2px solid orange;
  padding: 1rem;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: 5rem;
  position: relative;
  color: white;
}

.test:before,
.test:after {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  top: -1px;
  background-color: orange;
  clip-path: url(#cp)
}

.test:before {
  left: 0;
}

.test:after {
  right: 0;
  transform: scaleX(-1);
}

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

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

<svg height="0">
    <defs>
        <clipPath id="cp">
            <path d="m0 0v20c2.7868e-5 -10.559 8.1925-19.308 18.729-20z" fill="black"/>
        </clipPath>
    </defs>
</svg>

Answer 2

只需使用两个 div 并赋予它们这种样式

<div style="    background: black;    height: auto;    border: 1px solid black;    width: 30em;    border-top: 2em solid;    border-radius: 1.5em;    position: relative;">
    <div style="    position: absolute;    top: -2em;    text-align: center;    width: 100%;    color: white;    z-index: 10;    height: 2em;    padding: 5px;    box-sizing: border-box;">Your text</div>
    <div style="    height: 500px;    background: green;    border: 1px solid black;    border-radius: 1.5em;"></div>
</div>

如果你想使用背景图片有很多方法，使用透明边框并使用 background-position: top -2em right 0 定位背景。或者在子 div(body) 的顶部使用边距，或者对标题和正文（子项）使用绝对位置。您也可以使用 padding-top 并且没有边框。或者只是使用：//图像不受版权保护

.main{
  background: url(https://i.postimg.cc/gkR1JM8t/rolv-skjaerpe-3r-Nz5-Sn-c-Ms-unsplash.jpg);
  height: auto;
  border-radius: 1em;
  position: relative;
  padding: 0.1em;
  background-size: cover;
}
.header{
  text-align: center;
  width: 100%;
  color: white;
  min-height: 2em;
  padding: 5px;
  box-sizing: border-box;
}
.body{
  height: 20em;
  background: white;
  border-radius: 1em;
}

<div class="main">
  <div class="header">Your text</div>
  <div class="body" style=""></div>
</div>

Answer 3

试试这个代码：

clip-path: polygon(0 0, 100% 1%, 73% 69%, 28% 70%);