3

Saludos estoy intentando agregar una etiqueta de porcentaje a un boton pero no logro hacerlo, agradeceria mucho su ayuda. introducir la descripción de la imagen aquí

así deberia quedar los botones con sus etiquetas que el valor de porcentaje es dinamico

al momento he intentado esto

<div>
<span class="etiquetaOferta">{{redondeo(itemi.porcentajeDescuento)}}%</span>
<img class="imageOferta" src='../../../../../../assets/images/icons/etiqueta-oferta.svg'>

<button>
    07:20 - 07:40
</button>

con el css

.imageOferta {
position: absolute;
width: 20px;
margin-left: 13%;
margin-top: 1px;
}

span.etiquetaOferta {
    position: absolute;
    font-weight: bold;
    color: white;
    font-size: 8px;
    margin-left: 125px;
    margin-top: 3px;
    z-index: 1;
}

pero al hacer eso se desborda introducir la descripción de la imagen aquí

2
  • Buenas Tardes, puedes poner lo que haz intentado o un ejemplo de lo que llevas al momento, ya que todo puede variar dependiendo de lo que tienes actualmente. Commented el 7 dic. 2021 a las 0:37
  • ya lo edité con lo que he intentado... Commented el 7 dic. 2021 a las 0:51

2 respuestas 2

4

Puedes usar position: absolute; para ubicar la etiqueta dentro del button. La forma del triangulo en la parte baja de la etiqueta se puede crear con :after agregando bordes transparentes.

:root {
  --bg-btn: #2fcc71;
  --bg-tag: #171d49;
  --text-color: #f7f7f7;
}

.button {
  background-color: var(--bg-btn);
  color: var(--text-color);
  position: relative;
  padding: 5px 50px;
  border-radius: 5px;
  border: none;
  font-size: 1em;
}

.button .etiquetaOferta {
  position: absolute;
  width: 30px;
  height: 50%;
  right: 10px;
  top: 0;
  background-color: var(--bg-tag);
  color: var(--text-color);
  padding-top: 5px;
  font-size: 0.6em;
}

.button .etiquetaOferta:after {
  content: '';
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: solid 6px var(--bg-tag);
  border-left: solid 15px transparent;
  border-right: solid 15px transparent;
}
<button class="button">
      <span class="etiquetaOferta">20%</span>
      07:20 - 07:40
</button>

1
  • justo lo que buscaba, te lo agradezco mucho... Commented el 7 dic. 2021 a las 4:18
1

Una solución de mi parte sería poner todo dentro del botón. Teniendo en cuenta que estás usando bootstrap y una imágen como etiqueta, Quedaría así:

 

.btn.etiquetaOferta {
 padding-right: calc(.375rem * 2 + 30px);
}

.btn .imageOferta {
 display: block;
 position:absolute;
 clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
 top:0;
 right: .375rem;
 width: 30px;
 height: 30px;
 background: url(../../../../../../assets/images/icons/etiqueta-oferta.svg);  
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
 

<!DOCTYPE html>

<html lang="es">
 <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">   
 </head>
 <body>
  <button class="btn btn-success etiquetaOferta">
   <span class="imageOferta"></span>
   botón de lo que sea
  </button>
 </body>
</html>

Acá no se ve la imágen .svg porque puse la misma ruta de tu archivos local

1
  • muchas gracias muy buen aporte... Commented el 7 dic. 2021 a las 4:18

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.