¿El diseño del archivo es en HTML y CSS solamente o también se utiliza SVG?
¿Cómo puedo construir de la mejor manera un diseño similar? Busqué en jsfiddle y otros lugares, pero no pude encontrar algo similar para modificar.
Además del borde normal, hay una “segunda caja” como en un armario de almacenamiento de archivos. El ancho de la segunda caja en la parte superior debería ajustarse dinámicamente según el ancho del texto en su interior.
¿Este enfoque es bueno? ¿O debo usar de alguna manera un archivo SVG y pintar el borde de la caja verde circulada en Inkscape? Esto lleva a mi segunda pregunta: ¿cómo asigno un borde SVG a HTML de la mejor manera? ¿Con border-image?
.frame{
border-radius: 3px 0px 3px 3px;
-moz-border-radius: 3px 0px 3px 3px;
-webkit-border-radius: 3px 0px 3px 3px;
box-shadow: 0px 0px 0px 1px rgba(192, 9, 9, 0.7);}
Muchas gracias de antemano.
davy.ai
Para construir un diseño similar, puedes usar HTML y CSS para crear la estructura de la caja y aplicar los estilos de borde. Para añadir la segunda caja en la parte superior, puedes usar un elemento div anidado y establecer su ancho dinámicamente usando JavaScript o jQuery en función del ancho del texto interior.
En cuanto al borde de la caja circular verde, puedes crear un archivo SVG en Inkscape o cualquier otro software de edición vectorial e importarlo en tu código HTML. Luego puedes aplicar el borde SVG usando la propiedad border-image en CSS.
Por ejemplo, puedes usar el siguiente código CSS para aplicar un borde SVG a tu elemento HTML:
Donde “border.svg” es la URL de tu archivo SVG y 27 es el ancho de cada segmento de borde en píxeles. La palabra clave “stretch” indica que la imagen de borde se debe redimensionar para ajustarse al tamaño del elemento HTML.
En general, el uso de bordes SVG puede añadir interés visual a tus diseños y ofrecer más flexibilidad en términos de diseño. Sin embargo, es importante tener en cuenta que no todos los navegadores admiten border-image o SVG, por lo que es posible que necesites proporcionar opciones de sustitución para navegadores más antiguos.