如何添加不同形状的边框？

Question

是否可以仅使用CSS实现这种事情？

和html看起来像这样：

<div class="blocks-wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

我找到了一种解决方法：

.blocks-wrapper {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));  
}

但是这使shodow不再是边框，我需要像border这样的东西。我可以从javascript的每个块中添加不同的类，也可以使用svg文件，但是如果没有它可以这样做，则工作量将减少，并且负担也不重。谢谢！

Answer 1

尝试此希望对您有帮助：

// DATA -----------

var points = [
  {"x" :  0 , "y" :  40},
  {"x" : 30 , "y" :  40},
  {"x" : 30 , "y" :  20},
  {"x" : 60 , "y" :  20},
  {"x" : 60 , "y" : -10},
  {"x" : 30 , "y" : -10},
  {"x" : 30 , "y" :   0},
  {"x" :  0 , "y" :   0},
  {"x" :  0 , "y" :  10},
  {"x" : -30, "y" :  10},
  {"x" : -30, "y" :  20},
  {"x" :   0, "y" :  20},
];

//-----------

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(c.width / 2, c.height / 2);
ctx.scale(1,-1);

// DRAW THE GRID ----------

ctx.lineWidth = 1;
ctx.strokeStyle= "rgba(0,0,0,0.2)";
ctx.beginPath();

for (let i = 0; i < 200 ;i++) {

  ctx.moveTo(i*10,-200);
  ctx.lineTo(i*10,200);
  
  ctx.moveTo(-i*10,-200);
  ctx.lineTo(-i*10,200);
  
  ctx.moveTo(200, i*10);
  ctx.lineTo(-200, i*10);
  
  ctx.moveTo(200, -i*10);
  ctx.lineTo(-200, -i*10);
  
}

ctx.stroke();
ctx.closePath();

// DRAW THE SHAPE ----------

ctx.beginPath();
ctx.moveTo((points[0].x),(points[0].y));
for (let i = 1; i < points.length ;i++) {
  ctx.lineTo((points[i].x), points[i].y);
}
ctx.closePath();

  
ctx.lineWidth = 2;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.fillStyle="white";
ctx.fill()

.draw {
  border:1px solid grey;
}

<div class="draw"><canvas id="myCanvas" width="200" height="200"></canvas></div>