2

Estoy teniendo un pequeño problemilla con fondos y box-shadows.

introducir la descripción de la imagen aquí

Como podéis ver en la imagen, el triangulo (realizado con CSS) tiene como un borde que deja ver ese hueco, rompiendo las sombras del box-shadow de ambos elementos.

El código es el siguiente:

/* Generated by less 2.5.1 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Demo of the tool-tip CSS */
.tooltip {
  text-decoration: underline;
  color: #37b9b5;
  cursor: default;
}
.tooltip-bubble {
  position: absolute;
  z-index: 1;
  padding: 5px 10px;
  color: #fff;
  width: auto;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background-color: transparent;
  border-radius: 10px;
}
.tooltip-bubble div {
  position: relative;
  z-index: 1;
  font-size: 12px;
}
.tooltip-bubble::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #706f6f;
  border-radius: 10px;
}
.tooltip-bubble .arrow {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translate(-50%, 0);
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
}
.tooltip-bubble .arrow.up {
  top: -10px;
  border-bottom: 10px solid #706f6f;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.tooltip-bubble .arrow.down {
  border-top: 10px solid #706f6f;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
<div class="tooltip-bubble"><div>Tutorial de uso</div><div class="arrow down"></div></div>

He probado con backgrounds transparentes en la clase arrow, pero no hay manera de conseguirlo.

Si hay alguna forma de solucionar ese problema, me encantaría saberlo para futuros proyectos que me puedan surgir.

1
  • Aquí puede ver como hacer diferentes figuras con CSS Y de forma sencilla css-tricks.com/examples/ShapesOfCSS Lo único que cambias, en el caso del triángulo, son los bordes para variar su tamaño
    – aph1224
    el 23 may. 2017 a las 20:46

1 respuesta 1

2

Crear triángulos usando los bordes puede llevar a resultados no deseados como los que te encuentras con el box-shadow. Pero, para realizar lo que quieres, no tienes por qué usar los bordes para crear esas figuras. Podrías crear un cuadrado del ancho que quieras y después rotarlo 45 grados para que forme un "diamante".

Posicionando ese diamante de tal manera que quede por debajo de tu burbuja de texto y que sólo se vea una mitad... ¡ya tienes el triángulo que buscabas¡ Entonces la idea sería:

  • En lugar de usar bordes transparentes, usa la caja con forma de cuadrado (ancho = alto).
  • Rótalo usando transform: rotate(45deg)
  • Dale un ancho y alto algo mayor que lo que le dabas antes (hay una fórmula trigonométrica para obtener el valor exacto... yo he sido más simplista y lo he puesto a ojo)
  • Usa calc para posicionar el elemento, la posición será calculando a partir de la mitad del ancho/alto que le hayas dado a la caja.

Lo bueno es que, como estás usando el bloque en sí y no bordes transparentes, las propiedades van a seguir estando ahí y funcionando mejor que antes (aunque puede seguir habiendo algunos "daños colaterales", algunos de los cuales se podrían corregir jugando con los valores de las posiciones de la caja o de la sombra).

El código de las flechas se vería así:

.tooltip-bubble .arrow {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border:0;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background:#706f6f;
  transform:rotate(45deg);
  z-index:-1;
  left: -3px;
  top:calc(50% - 8px);
}

.tooltip-bubble .arrow.down {
  top: calc(100% - 8px);
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.up {
  top: -8px;
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.right {
  left:auto;
  right:-3px;
}

Y aquí te dejo una demo:

var botones = document.querySelectorAll("button");
for (var x = 0; x < botones.length; x++) {
  botones[x].addEventListener("click", function() {
    document.querySelector(".arrow").className = "arrow " + this.dataset.lado;
  });
}
/* Generated by less 2.5.1 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Demo of the tool-tip CSS */

.tooltip {
  text-decoration: underline;
  color: #37b9b5;
  cursor: default;
}

.tooltip-bubble {
  position: absolute;
  z-index: 1;
  padding: 5px 10px;
  color: #fff;
  width: auto;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background-color: transparent;
  border-radius: 10px;
  margin:50px; /* añadido para que se vea mejor, bórralo después */
}

.tooltip-bubble div {
  position: relative;
  z-index: 1;
  font-size: 12px;
}

.tooltip-bubble::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #706f6f;
  border-radius: 10px;
}

.tooltip-bubble .arrow {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border:0;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background:#706f6f;
  transform:rotate(45deg);
  z-index:-1;
  left: -3px;
  top:calc(50% - 8px);
}

.tooltip-bubble .arrow.down {
  top: calc(100% - 8px);
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.up {
  top: -8px;
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.right {
  left:auto;
  right:-3px;
}
<div class="tooltip-bubble">
  <div>Tutorial de uso</div>
  <div class="arrow down"></div>
</div>

<button data-lado="left">Izquierda</button>
<button data-lado="right">Derecha</button>
<button data-lado="up">Arriba</button>
<button data-lado="down">Abajo</button>

1
  • Muchas gracias Álvaro, desconocía eso de los triángulos con los box-shadows hasta ayer que me pasó y no había hecho antes.
    – Zander
    el 24 may. 2017 a las 17:46

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.