如何在DIV的左侧和右侧创建波形边框

<div class="wave-border"></div>

.wave-border {
  position: relative;
  width: 200px; /* 设置DIV的宽度 */
  height: 200px; /* 设置DIV的高度 */
  border: none; /* 取消默认边框 */
}

.wave-border:before,
.wave-border:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("wave.png"); /* 设置波形背景图 */
  background-repeat: repeat-x; /* 水平平铺 */
  background-position: left top; /* 背景图起始位置 */
}

.wave-border:before {
  left: -10px; /* 左侧波形边框位置 */
}

.wave-border:after {
  right: -10px; /* 右侧波形边框位置 */
  transform: scaleX(-1); /* 水平翻转背景图 */
}