Question

我想创建具有复杂波形的div，我遇到了很多教程，并且尝试了很多东西，但我做不到。产生波浪和背景在波浪中停下来的最佳方法是什么？最好/最简单的方法是什么，我听说过svg，但没有技巧。实现起来复杂吗？我希望我可以绘制曲线并相应地更改背景，就像这个WordPress主题： https://www.elegantthemes.com/blog/theme-releases/shape-dividers

我希望我可以这样做： http://www.zupimages.net/viewer.php?id=19/22/jr0r.png

我必须学习svg吗？或使用illustrator，如果我有几次波动，则直接在CSS中过于复杂。有像illustrator这样的软件可以通过svg免费实现吗？

，然后用bootstrap 4等其他样式吗？ ...谢谢

Answer 1

通常，您可以使用Perlin杂讯来执行此操作。但是，您也可以通过在svg画布上设置连续x和随机y的多个点并将这些点与贝塞尔曲线相连来实现。

let w = 1000;
let h = 300;
svg.setAttributeNS(null,"viewBox",`0 0 ${w} ${h}`)
let n = 18; //number of points
let points = [];// the points array used to draw the curve

// add points to the points array
for(let x=0; x <= w; x+= w/n){
  let y = h - Math.random()*h;
  points.push({x:x,y:y})
}


// a function to connect all the points in the points array with beziers
function  connect(points) {    
   let d = "";// the d attribute for the path
   // move to the first point of the array
   d+= `M${points[0].x}, ${points[0].y}`;
    //build the path
    for (var i = 1; i < points.length - 2; i++) {
      var cp = {};
      cp.x = (points[i].x + points[i + 1].x) / 2;
      cp.y = (points[i].y + points[i + 1].y) / 2;
      
      d+=`Q${points[i].x},${points[i].y} ${cp.x},${cp.y}`
    }
    //the last curve
    let index = points.length-2
   d+=`Q${points[index].x},${points[index].y} ${points[index + 1].x},${points[index + 1].y}`;
   //close the path
   d+=`V${h}H0z`
    return d;
  }
//set the attribute `d` for the wave
wave.setAttributeNS(null,"d",connect(points))

svg{border:1px solid}

<svg id="svg" >
  <path id="wave" />
</svg>

Answer 2

我以前只是通过使用图像作为边框来尝试此操作。您可以创建带有波浪形边框的图像并以透明效果播放，从而获得所需的效果。

用波制作复杂div的最简单方法

2 个答案: