CSS中的缝合边框效果

Question

目前我的边界看起来像这样：

使用的CSS是：

.widget > h5 {
    border: 3px double #cccccc;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-bottom: 12px;
    padding-top: 12px;
    text-align: center;
    text-transform: uppercase;
}

我的问题是如何创建类似于此的拼接效果：

.stitched_element {
border: 2px dashed  #ffffff;
box-shadow: 0 0 0 8px #ff0030;
}

Answer 1

如果您不需要三角形，请使用Edmond Wang's solution（无处不在）。

<小时/> 但如果确实需要，则必须使用canvas或svg创建它，这更复杂且may not work on every browser。

我仍然使用画布制作fiddle where you can see the result：

<canvas width="500"></canvas>

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// Then use ctx to draw what you need e.g :
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 100, 100); 
// Draws a black rectangle at (X,Y)=(0,0) and width & height = 100px