Flechas de bocadillo que heredan el color principal | Programar Plus

0

Interesante pregunta:

Pregunta del bocadillo de diálogo css3: para el color del borde del “triángulo”, ¿cómo puedo configurarlo en el bgcolor de su div padre automáticamente?

– Jin Yang (@jzy) 1 de febrero de 2012

Por “bocadillo css3”, Jin significa usar un pseudo elemento en un contenedor para agregar una pequeña flecha de puntero (triángulo). No es realmente CSS3, pero eso es pedante.

Digamos que el color rosa no es práctico de configurar en un archivo CSS externo. Quizás sea una configuración de usuario, o quizás su configuración de forma dinámica de alguna manera. 

<div class="speech-bubble" style="background: pink;">
   I like bananas, because they have no bones.
</div>

Configurar el contenedor con un estilo en línea está muy bien, pero desafortunadamente no hay un estilo en línea para pseudo elementos. Entonces podríamos terminar con algo como esto:

Gorrón.

¡Aunque existe una solución! Mientras configuramos el estilo en línea para el contenedor, podemos establecer un estilo en línea para border-color también. Aunque el contenedor en realidad no tiene borde, podemos confiar en la herencia para pasar ese color al pseudo elemento, que se trata como un elemento hijo. 

<div class="speech-bubble" style="border-color: pink; background: pink;">
   I like bananas, because they have no bones.
</div>

Luego, en nuestro código para el pseudo elemento, específicamente haremos que herede el color:

.speech-bubble:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid black;
   border-top-color: inherit; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent; 
}

Note que he solicitado inherit a border-top-color en lugar de la propiedad taquigráfica border-top. Por alguna razón (siéntete libre de iluminarme) inherit no funciona en taquigrafía. También tenga en cuenta que cuando anula el color con inherit, no “hereda” del color establecido justo encima de él (negro), hereda de su padre. Entonces, si necesita un valor predeterminado, deberá configurar el border-color en el padre.

Ver demostración

(Visited 19 times, 1 visits today)