CSS实现sgwiggle波浪边框：左右边框效果异常求助

我已经通过以下CSS代码实现了上下波浪边框效果：

.bottom,
.up,
.left,
.right {
  height: 30vh;
  position: relative;  
  background: black;
  margin-bottom: 15px;
  width: 50vw;
  margin-inline: auto;
}

/* Text styling */
.bottom,
.up,
.left,
.right {
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  padding-top: 25px;
  padding-bottom: 25px;
}
/* */

.bottom::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(
    circle at 10px -5px,
    transparent 12px,
    #fff 13px
  );
}
.bottom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(
    circle at 10px 15px,
    #fff 12px,
    transparent 13px
  );
}

.up::before {
  content: "";
  position: absolute;
  transform: rotate(180deg); /*Very important*/
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(
    circle at 10px -5px,
    transparent 12px,
    #fff 13px
  );
}

.up::after {
  content: "";
  position: absolute;
  transform: rotate(180deg);
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(
    circle at 10px 15px,
    #fff 12px,
    transparent 13px
  );
}

对应的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="bottom">4</div>
    <div class="up">5</div>
    <div class="left">6</div>
    <div class="right">7</div>
  </body>
</html>

现在我希望为元素实现相同样式的左右波浪边框，编写了如下CSS代码：

.left,
.right {
  overflow: hidden;
}

.right::before {
  content: "";
  position: absolute;
  transform: rotate(-90deg);
  width: 100%;
  right: 0;
  top: 2px;
  bottom: 0;
  left: 49%;
  background-repeat: repeat;
  height: 9px;
  background-size: 20px 20px;
  background-image: radial-gradient(
    circle at 10px -5px,
    transparent 12px,
    #fff 13px
  );
}

.right::after {
  content: "";
  position: absolute;
  transform: rotate(-90deg); /*Very important*/
  width: 100%;
  right: 0;
  top: -1px;
  bottom: 0;
  left: 48.5%;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(
    circle at 10px 15px,
    #fff 12px,
    transparent 13px
  );
}

.left::before {
  content: "";
  position: absolute;
  transform: rotate(90deg); /*Very important*/
  width: 100%;
  top: 2px;
  bottom: 0;
  left: -49%;
  background-repeat: repeat;
  height: 9px;
  background-size: 20px 20px;
  background-image: radial-gradient(
    circle at 10px -5px,
    transparent 12px,
    #fff 13px
  );
}

.left::after {
  content: "";
  position: absolute;
  transform: rotate(90deg);
  width: 100%;
  top: -1px;
  bottom: 0;
  left: -48.5%;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(
    circle at 10px 15px,
    #fff 12px,
    transparent 13px
  );
}

但得到的效果不符合预期：

恳请帮忙排查问题所在。

内容的提问来源于stack exchange，提问作者Albert Franklin