4

Saludos, estoy tratando de centrar la flecha que realizo con los pseudo-elementos :Before y :after de css pero no encuentro como resolver mi problema, la idea es que la flecha se centre al div que lo contiene y que la flecha no cambie de posición sin importar el numero. Quedo atento a cualquier recomendación para realizar este tipo de flechas.

.container1 {
    color: #727176;
    background-color: #fff;
    position: absolute;
    padding: 6px;
    font-style: normal;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.container1::before {
    content: "";
    position: absolute;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    width: 19px;
    height: 19px;
    left: 26px;
    top: 19px;
    z-index: -1;
    transform: rotate(45deg);
    cursor: pointer;
}

.container1::after {
    content: "";
    top: 30px;
    left: 24px;
    position: absolute;
    height: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid white;
    cursor: pointer;
}
<div class="container1" style="top: 60px;">
    <span>$990,000,000,000</span>
</div>
<div class="container1">
    <span>$990,000</span>
</div>

6
  • Por favor, reformula la pregunta es.stackoverflow.com/help/how-to-ask el 6 sep. 2017 a las 15:29
  • @DanielDíaz a que te refieres con eso? que la cambie?
    – zerokira
    el 6 sep. 2017 a las 15:54
  • La pregunta debe de ser una pregunta, con signos de interrogante y eso :S el 6 sep. 2017 a las 15:57
  • @DanielDíaz Eso no lo dice en ninguna parte. Quizá el título de la pregunta se pueda mejorar haciéndolo más descriptivo del problema pero no tiene porque ir entre signos de interrogación
    – user7176
    el 6 sep. 2017 a las 16:12
  • Mira los ejemplos de "Bien" y "Mal" el 7 sep. 2017 a las 8:50

1 respuesta 1

4

Rápidamente se me ocurre que sería una muy buena opción para usar calc() para variar la posición a la izquierda left, tomando como referencia el 50% y restándole la mitad del ancho que ocupa la "flecha". Seguramente quedarían pendiente algunos ajustes menores, pero la idea está plasmada a continuación:

.container1 {
    color: #727176;
    background-color: #fff;
    position: absolute;
    padding: 6px;
    font-style: normal;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.container1::before {
    content: "";
    position: absolute;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    width: 19px;
    height: 19px;
    left: calc(50% - 10px);
    top: 19px;
    z-index: -1;
    transform: rotate(45deg);
    cursor: pointer;
}

.container1::after {
    content: "";
    top: 30px;
    left: calc(50% - 11px);
    position: absolute;
    height: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid white;
    cursor: pointer;
}
<div class="container1" style="top: 60px;">
    <span>$990,000,000,000</span>
</div>
<div class="container1">
    <span>$990,000</span>
</div>

1
  • precisamente estaba pensando en algo con cal() pero no sabia como hacerlo, muy buena respuesta gracias !!!
    – zerokira
    el 6 sep. 2017 a las 15:16

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.