4

Tengo el siguiente elemento de etiquetas:

introducir la descripción de la imagen aquí

Quisiera lograr poder que se vea de la siguiente forma:

introducir la descripción de la imagen aquí

Y cuando pase el cursor (mouse) por una de las etiquetas se muestre de la siguiente forma:

introducir la descripción de la imagen aquí

Los elementos dentro del contenedor se utilizan para mostrar etiquetas con contenido relacionado en la página.

.tags{
    text-align: center;
    color: rgb(0, 0, 0);
    font-weight: bold;
    position: relative;
    width: 180px;
    background-color: rgb(145, 255, 0);
}
.tag1 {
    background-color: rgb(145, 255, 0);
  }
  .tag2 {
    background-color: rgb(255, 196, 0);
  }
  .tag3 {
    background-color: rgb(248, 75, 7);
  }
<!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="tags">
        <div class="tag1">
            Consulta con auditoria
        </div>
        <div class="tag2">
            En cotizacion
        </div>
        <div class="tag3">
            Espera de documentación
        </div>
    </div>
</body>
</html>

3 respuestas 3

6

Para la punta de flecha puedes usar clip-path aquí un generador, luego el resto es dejar un width pequeño y al hacer hover aumentarlo

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

.verde {
    background-color: rgb(145, 255, 0);
}
.amarillo {
    background-color: rgb(255, 196, 0);
}
.rojo {
    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;;

}
<div class="tags">
  <div class="verde">
      Consulta con auditoria
  </div>
  <div class="amarillo">
      En cotizacion
  </div>
  <div class="rojo">
      Espera de documentación
  </div>
</div>

1
  • Me gusto tu respuesta +1. Commented el 21 jun. 2023 a las 20:43
2

Una posible solución sería encerrar en etiquetas <span> a tus textos para luego darles un padding y tengan un espacio a la izquierda y derecha:

.tags div span {
  padding: 0 20px 0 20px;
}

Hacemos esto debido a que el ancho de cada tag medirá 20px, y como estamos empujando a la izquierda a cada texto (que son los <span>), se verá solo el espacio vacío en el recuadro:

.tags div {
  width: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

Aquí indico que cada tag tendrá un ancho de 20px, el texto estará alineado al centro, el contenido fuera del contenedor permanecerá oculto y no hacemos un salto de línea con nowrap.

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

.tag1 {
  background-color: rgb(145, 255, 0);
}

.tag2 {
  background-color: rgb(255, 196, 0);
}

.tag3 {
  background-color: rgb(248, 75, 7);
}

.tags div span {
  padding: 0 20px 0 20px;
}

.tags div {
  width: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
<div class="tags">
  <div class="tag1">
    <span>Consulta con auditoria</span>
  </div>
  <div class="tag2">
    <span>En cotizacion</span>
  </div>
  <div class="tag3">
    <span>Espera de documentación</span>
  </div>
</div>

Y para lograr el efecto de la animación, tendríamos que usar la pseudo-clase :hover, indicando que al pasar el mouse encima, su ancho medirá 250px y que el contenido de adentro será visible:

.tags div:hover {
  width: 250px;
  overflow: visible;
}

Ejemplo:

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

.tag1 {
  background-color: rgb(145, 255, 0);
}

.tag2 {
  background-color: rgb(255, 196, 0);
}

.tag3 {
  background-color: rgb(248, 75, 7);
}

.tags div span {
  padding: 0 20px 0 20px;
}

.tags div {
  width: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.3s ease all;
}

.tags div:hover {
  width: 250px;
  overflow: visible;
}
<div class="tags">
  <div class="tag1">
    <span>Consulta con auditoria</span>
  </div>
  <div class="tag2">
    <span>En cotizacion</span>
  </div>
  <div class="tag3">
    <span>Espera de documentación</span>
  </div>
</div>

1

No sé si entendí bien lo que necesitas, pero te propongo esta opción, añadiendo a cada clase lo siguiente (para que el texto no se salga del div y realice la animación):

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: width 0.75s

Y luego añadiendo hover a esas mismas clases podrías obtener lo que creo necesitas.

.tags{
    text-align: center;
    color: rgb(0, 0, 0);
    font-weight: bold;
    position: relative;
    width: 180px;
}
.tag1 {
    background-color: rgb(145, 255, 0);
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.75s
  }
  .tag2 {
    background-color: rgb(255, 196, 0);
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.75s
  }
  .tag3 {
    background-color: rgb(248, 75, 7);
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.75s
  }
  
.tag1:hover {
  width: 100%;
}
.tag2:hover {
  width: 100%;
}
.tag3:hover {
  width: 100%;
}
<!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="tags">
        <div class="tag1">
            Consulta con auditoria
        </div>
        <div class="tag2">
            En cotizacion
        </div>
        <div class="tag3">
            Espera de documentación
        </div>
    </div>
</body>
</html>

Tu Respuesta

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

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