Cómo hacer imágenes con bordes repetidos

Acabo de ver este pequeño e interesante sitio de Max Bittker: broider. Usted diseñará una imagen en una cuadrícula de 9 divisiones (excepto la parte central) y producirá una imagen para que la use junto border-imagecon el CSS para copiar y pegar.

Mira mi pequeño diseño:

Las áreas de la imagen finalmente se generan en un archivo PNG base64 con los diseños en cada área. Por ejemplo, si acaba de dibujar en el cuadrante superior central, el PNG generado tendrá este aspecto:

Lo que te da un borde único como este, que podría ser justo lo que deseas:

En el nuevo sitio web ShopTalk Show, tenemos un efecto similar en algunos lugares, como este:

Lo hicimos de una manera ligeramente diferente. En lugar de border-image, usamos un background-imagey. background-repeat: round;De esa manera pudimos usar una imagen prácticamente de la misma manera, solo que tuvimos que dar el paso adicional de colocar un elemento “interno” para eliminar el medio (para simular un borde). .

Como esto:

Mirándolo ahora, probablemente deberíamos haber usado border-image, ya que puede hacer lo mismo y es un poco más limpio. Nuestra página de Almanaque tiene más ejemplos.