CSS形状，带有曲线矩形边的矩形

Question

需要帮助创建上面的形状与弯曲的矩形角度...插入图像里面我可以做到...有人可以帮我...请...

我尝试使用border-radius选择性地选择我想要矩形的边

＆＃13;

＆＃13;

.curv {
  width: 800px;
  margin: 0 auto;
  position: relative;
  padding-top: 100px;
  overflow: hidden;
}

.curv:before {
  background: #333;
  height: 200px;
  left: -20px;
  right: 0px;
  top: 0px;
  content: '';
  position: absolute;
  border-radius: 0% 0 0 0;
  clip-path: polygon(53% 0, 100% 49%, 57% 100%, 0% 100%, 0 47%, 0% 0%);
}

.holder {
  height: 200px;
  background: #333;
  position: relative;
  z-index: 9999;
}

＆＃13;

<div class="curv">
  <div class="holder"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我会使用一些伪元素和相同的背景图像两次。

以下是一个示例（只缺少一条曲线）：

body {
  background:pink;
}
.box {
  margin:100px;
  width:200px;
  height:100px;
  border-right:3px solid green;
  border-bottom:3px solid green;
  border-radius:0 0 10px 10px;
  background:
    url(https://lorempixel.com/200/150/) bottom;
  position:relative;
}
.box:before {
  content:attr(data-text);
  color:#000;
  font-weight:bold;
  text-shadow:0px 0px 5px #fff;
  text-align:center;
  position:absolute;
  height:50px;
  top:-53px;
  right:-3px;
  width:50%;
  background:
    url(https://lorempixel.com/200/150/) top right;
  border:3px solid green;
  border-bottom:none;
  border-radius:10px 10px 0 0;
}
.box:after {
  content:"";
  position:absolute;
  left:-3px;
  width:50%;
  bottom:-3px;
  height:100px;
  border:3px solid green;
  border-right:none;
  border-radius:10px 0 0 10px;
}

<div class="box" data-text="SOME TEXT">
</div>