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 or svg, which is more complex and may not work on every browser.

创建它

我仍然使用 canvas 制作了一个 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

CSS 中的缝合边框效果

stitched border effect in CSS

css

photoshop

jquery