0

Tengo el siguiente elemento donde muestro etiquetas mediante paso el cursor (mouse), pero tengo mas elementos en la parte de arriba. Entonces quisiera que se vea de la siguiente forma:

introducir la descripción de la imagen aquí

He intentado varias cosas pero no logro que me deje ver las etiquetas por encima de la información de Inicio, 00:29:23, Ivan 2

A continuación les comparto el código HTML y CSS de lo que tengo desarrollado:

.tags{
  text-align: center;
  color: rgb(0, 0, 0);
  font-weight: bold;
  position: relative;
}

.tag1 {
  background-color: rgb(145, 255, 0);
}
.tag2 {
  background-color: rgb(255, 196, 0);
}
.tag3 {
  background-color: rgb(248, 75, 7);
}

.tags div{
 position: relative;
 height:33px;
 color:black;
 padding-right:20px;
 overflow:hidden;
 width:16px;
 display:flex;
 text-align: left;
 align-items: center;
 clip-path: polygon(0% 0%, 74% 0%, 85.5% 50%, 74% 100%, 0% 100%);
 white-space: nowrap;
 transition: width 0.6s;
}
 
.tags div:before{
 content:'  ';
 display:inline-block;
 margin-left:30px;
}

.tags div:hover{
 width:240px;;

}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="user-info">
        <div class="tmp">
            <div class="tmp-p">Inicio:&nbsp;</div>
            <div class="user-date-tmp">00:29:23</div>
        </div>
        <div class="user-name">Ivan 2</div>
        <div class="tags">
            <div class="tag1">
                Consulta con auditoria
            </div>
            <div class="tag2">
                En cotizacion
            </div>
            <div class="tag3">
                Espera de documentación
            </div>
        </div>
    </div>
</body>
</html>

3
  • 1
    ¿Que has intentado? No te lo tomes mal, pero así como esta tu pregunta, pareciera que nos estas pidiendo que lo hagamos por vos sin demostrar esfuerzo de tu parte.
    – Marcos
    el 22 jun. a las 14:41
  • Muchas gracias por tu comentario, creo que no me exprese muy bien. Lo tendré en cuenta. el 22 jun. a las 14:44
  • Decir "He intentado varias cosas[...]" no sería la mejor forma de demostrar que has intentado resolverlo. ¿Podrías agregar código? o ¿indicar explicitamente que o como? PD: Puede que te sirva leer CSS > position
    – Marcos
    el 22 jun. a las 15:02

1 respuesta 1

1

Para poder recolocar tus elementos dentro de la estructura pretendida es necesario que dichos elementos se agrupen dentro de html de una modo que te permita desplazarlos y alinearlos del modo en que necesitas. Para ello es mejor dotar de ciertas propiedades a los contenedores en que se enmarcan estos elementos y a su vez permitir que estos ocupen el espacio deseado. Para ello he hecho algunos cambios en tu código que detallo a continuación:

  1. los contenedores div destinados a albergar tanto la animación como el texto aledaño los he unificado para que los elementos se puedan colocar de un modo más sencillo uno a lado de otro. Se han respetado las clases de css otorgadas a tal efecto.

  2. para poder distribuir los contenedores dentro de los estos apartados del modo pretendido he utilizado las propiedades de css flex, para el padre, e "inline" para los hijos a fin de que estos se comporten de un modo fluido, ocupando el espacio disponible tal y como se desea.

  3. con el objetivo de alinear los elementos para que ocupen el espacio dentro del contenedor he utilizado las propiedades de css: "jutify-content: flex-start" y "align-items: center" para que el primero coloque a la derecha los elementos y el segundo los sitúe centrados verticalmente.

.user-info div {display: flex}

.tags{
  text-align: center;
  color: rgb(0, 0, 0);
  font-weight: bold;
  position: relative;
  justify-content: flex-start;
  align-items: center;
}

.tags span {display: inline-block; color: #333;}

.tag1 {
  background-color: rgb(145, 255, 0); display: inline;
}
.tag2 {
  background-color: rgb(255, 196, 0); display: inline;
}
.tag3 {
  background-color: rgb(248, 75, 7); display: inline;
}

.tags div{
 position: relative;
 height:33px;
 color:black;
 padding-right:20px;
 overflow:hidden;
 width:16px;
 display:flex;
 text-align: left;
 align-items: center;
 clip-path: polygon(0% 0%, 74% 0%, 85.5% 50%, 74% 100%, 0% 100%);
 white-space: nowrap;
 transition: width 0.6s;
}
 
.tags div:before{
 content:'  ';
 display:inline-block;
 margin-left:30px;
}

.tags div:hover{
 width:240px;;

}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="user-info">
       
        <div class="tags tmp">
                <div class="tag1">Consulta con auditoria</div>
                <span class="tmp-p">Inicio:&nbsp;</span>
            </div>
         <div class="tags tmp">
            <div class="tag2">En cotizacion</div>
            <span class="user-date-tmp">00:29:23</span>
         </div>
        <div class="tags tmp">
            <div class="tag3">Espera de documentación</div>
             <span class="user-name">Ivan 2</span>
        </div>
    </div>
</body>
</html>

A continuación comparto un enlace a la documentación sobre el uso de las propiedades de css flexblox que puede resultar de utilidad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.