弧边效果

htmlcss

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="edge-bg"></div>
  </body>
</html>

css

.edge-bg {
  width: 284px;
  height: 46px;
  margin: 0 auto;
  background-color: #ffebec;
  border-radius: 0 0 20px 20px;
  position: relative;
  transform-origin: center top;
  transform: perspective(20px) rotateX(-3deg);
}
.edge-bg::before,
.edge-bg::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ffebec;
  top: 0;
}
.edge-bg::before {
  left: -10px;
  background: radial-gradient(
    circle at 0 100%,
    transparent 10px,
    #ffebec 10px
  );
}
.edge-bg::after {
  right: -10px;
  background: radial-gradient(
    circle at 100% 100%,
    transparent 10px,
    #ffebec 10px
  );
}

弧边效果 ​

弧边效果