您可以使用梯度如下：

.box {
  --r: 40px; /* control the curvature*/

  --g:  #0000 98%,#EFB046; /* the color here */
  width: 250px;
  height: 80px;
  background:
    radial-gradient(var(--r) 100% at var(--r) 0   ,var(--g)) calc(-1*var(--r)) 0,
    radial-gradient(var(--r) 100% at var(--r) 100%,var(--g)) calc(-1*var(--r)) 100%;
  background-size: 100% 50%;
  background-repeat: repeat-x;
}

body {
  background: #000;
}

<div class="box"></div>

技巧是用::before和::after。在我的代码中，你可以在CSS中添加border-radius。

.pointed {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:#c08457;
    text-align:center;
    line-height:40px;
}

.pointed:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid #8d4e24;
    border-bottom:20px solid transparent;
}

.pointed:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid #8d4e24;
    border-bottom:20px solid transparent;
}

<div class="pointed"> Text Content </div>

This question here详细说明了您的请求
请阅读它和它的各种答案。
简而言之，看起来有两种方法。
一种方法是创建4个元素来屏蔽主元素的内容，这种方法的缺点是，如果主元素下面有内容，您将无法看到任何内容
第二种方法是创建一个SVG来放置一个path元素。这将允许您创建您正在寻找的剪切块。一个示例可能如下所示
下面显示的是两种可能解决方案的HTML和CSS。请注意，使用free SVG editor绘制的路径很糟糕，但给出了可以完成的大致概念
超文本标记语言

<div id="four-element">
      <p class="SpanText">Hello World</p>
      <div class="top left"></div>
      <div class="top right"></div>
      <div class="bottom left"></div>
      <div class="bottom right"></div>
  </div>
  <div id="svg">
    <svg width="100%" height="270px" \>
      <path d="M 52 20 C 53 75 10 135 0 135 C 10 135 55 142 57 272 L 268 270 C 269 180 267 163 304 145 C 266 134 246 62 245 19 L 52 20 Z" fill="blue"/>
      <text x="145" y="145" text-anchor="middle" alignment-baseline="middle">
        Hello World
      </text>
    </svg>
  </div>

中央支助系统

#four-element {
    margin: 40px;
    height: 100px;
    width: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#four-element div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFFFFF;
}
.SpanText{
    position: absolute;
    top: 25%;
    left: 25%;
    
} 
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }