[CSS] Triángulos con box shadows [Derecha,Izquierda,Arriba y Abajo]

  • 0 Respuestas
  • 1120 Vistas

Valarjar
Hijo de Odyn

En este código sabremos crear bocadillos de texto con sombras correctamente, muchos lo hacen e implementan mal el código ya que la sombra muestra el triángulo en blanco cuando no debería ser.

Código: Javascript
  1. var botones = document.querySelectorAll("button");
  2. for (var x = 0; x < botones.length; x++) {
  3.   botones[x].addEventListener("click", function() {
  4.     document.querySelector(".arrow").className = "arrow " + this.dataset.lado;
  5.   });
  6. }
  7.  

El javascript es para cambiar el lado del triángulo del bocadillo.

Código: CSS
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6.  
  7. .tooltip {
  8.   text-decoration: underline;
  9.   color: #37b9b5;
  10.   cursor: default;
  11. }
  12.  
  13. .tooltip-bubble {
  14.   position: absolute;
  15.   z-index: 1;
  16.   padding: 5px 10px;
  17.   color: #fff;
  18.   width: auto;
  19.   box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  20.   background-color: transparent;
  21.   border-radius: 10px;
  22.   margin:50px; /* añadido para que se vea mejor, bórralo después */
  23. }
  24.  
  25. .tooltip-bubble div {
  26.   position: relative;
  27.   z-index: 1;
  28.   font-size: 12px;
  29. }
  30.  
  31. .tooltip-bubble::before {
  32.   position: absolute;
  33.   content: '';
  34.   top: 0;
  35.   left: 0;
  36.   width: 100%;
  37.   height: 100%;
  38.   background-color: #706f6f;
  39.   border-radius: 10px;
  40. }
  41.  
  42. .tooltip-bubble .arrow {
  43.   content: '';
  44.   display: block;
  45.   position: absolute;
  46.   width: 16px;
  47.   height: 16px;
  48.   border:0;
  49.   box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  50.   background:#706f6f;
  51.   transform:rotate(45deg);
  52.   z-index:-1;
  53.   left: -3px;
  54.   top:calc(50% - 8px);
  55. }
  56.  
  57. .tooltip-bubble .arrow.down {
  58.   top: calc(100% - 8px);
  59.   left: calc(50% - 8px);
  60. }
  61.  
  62. .tooltip-bubble .arrow.up {
  63.   top: -8px;
  64.   left: calc(50% - 8px);
  65. }
  66.  
  67. .tooltip-bubble .arrow.right {
  68.   left:auto;
  69.   right:-3px;
  70. }
  71.  

Código: HTML5
  1. <div class="tooltip-bubble">
  2.   <div>Tutorial de uso</div>
  3.   <div class="arrow down"></div>
  4. </div>
  5.  
  6. <button data-lado="left">Izquierda</button>
  7. <button data-lado="right">Derecha</button>
  8. <button data-lado="up">Arriba</button>
  9. <button data-lado="down">Abajo</button>
  10.