сшитые пограничный эффект в 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