Este tipo de diseños en el mundo del diseño frontend siempre ha sido un desafío, pero CSS evoluciono a tal punto que se pueden hacer cosas increíbles y diseños complejos que uno pensaría que son imposibles.
En sus tiempos para lograr este efecto era necesario utilizar pseudo elementos y dos etiquetas superpuestas.
These types of designs in the world of frontend design have always been a challenge, but CSS evolved to such a point that you can do incredible things and complex designs that one would think were impossible. In its time, to achieve this effect it was necessary to use pseudo elements and two overlapping labels.
Ahora con CSS es tan fácil lograr esto con 3 lineas de código porque admite el uso de imágenes en los bordes y funciones de recorte en ellas. Para lograr esto solo se necesita utilizar “border-image-slice” con el valor 1 y el resto es sencillo, además tiene soporte en muchísimos navegadores.
Now with CSS it is so easy to achieve this with 3 lines of code because it supports the use of images on the borders and cropping functions on them. To achieve this you only need to use “border-image-slice” with the value 1 and the rest is simple, and it is also supported in many browsers.
