在 CSS 中為頂部和底部邊框創建波浪形邊框

Question

我正在嘗試創建一個波浪形的頂部和底部邊框，就像這里的圖像一樣

我嘗試使用以下代碼重新創建相同的效果

.wave{
  background: white;
  height: 25px;
  position: relative;  
}
.wave::before, .wave::after{
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, rgba(237, 30, 30, 1) 20px, transparent 21px);
}


.wavebottom{
  background: rgba(237, 30, 30, 1);
  height: 25px;
  position: relative;  
}
.wavebottom::before, .wave::after{
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, white 21px);
}
.wavebottom::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, white 20px, transparent 21px);
}

我在 3 個 div 中有代碼..第一個 div 有 wave 類

第二個 div 有背景顏色和內容

第三個 div 有 wavebottom 類

但我得到的波浪結果看起來像那樣

我正在處理寬度為 1920 像素的頁面，我不確定如何才能使它看起來與第一張圖片一樣

Answer 1

嘗試使用此：

 .wave-top { position: relative; margin-top: 20px; } .wave-top::before, .wave-top::after { border-bottom: 5px solid rgba(237, 30, 30, 1); } .wave-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background-size: 20px 40px; background-image: radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px); } .wave-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px; background-size: 40px 40px; background-image: radial-gradient(circle at 10px 26px, rgba(237, 30, 30, 1) 20px, transparent 21px); } .wave-mid { background-color: rgba(237, 30, 30, 1); height: 50px; } .wave-bottom { position: relative; } .wave-bottom::before, .wave-bottom::after { border-top: 5px solid rgba(237, 30, 30, 1); } .wave-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background-size: 20px 40px; background-image: radial-gradient(circle at 10px -15px, transparent 20px, #fff 21px); } .wave-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px; background-size: 40px 40px; background-image: radial-gradient(circle at 10px 26px, #fff 20px, transparent 21px); } 

 <div class='wave-top'></div> <div class="wave-mid"></div> <div class="wave-bottom"></div> 

您可以根據需要增加中div的高度。 在這里，我將其保留為50px

Answer 2

我制作了一個用於波浪形狀的在線生成器，您可以從中輕松獲取代碼： https ://css-generators.com/wavy-shapes/

選擇您的配置並獲取代碼。 它依賴於 CSS 掩碼，所以你可以擁有任何你想要的背景顏色：

 .box { --mask: radial-gradient(31.50px at 50% 44.40px,#000 99%,#0000 101%) calc(50% - 48px) 0/96px 51% repeat-x, radial-gradient(31.50px at 50% -20.4px,#0000 99%,#000 101%) 50% 24px/96px calc(51% - 24px) repeat-x, radial-gradient(31.50px at 50% calc(100% - 44.40px),#000 99%,#0000 101%) calc(50% - 48px) 100%/96px 51% repeat-x, radial-gradient(31.50px at 50% calc(100% + 20.40px),#0000 99%,#000 101%) 50% calc(100% - 24px)/96px calc(51% - 24px) repeat-x; -webkit-mask: var(--mask); mask: var(--mask); height: 300px; background: linear-gradient(45deg,red,blue); }

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