A pop-out with an arrow using plain CSS and HTML only

Create a pop-out with arrow using plain css and html only

JSFiddle Link: https://jsfiddle.net/vish6263/vwg06ecd/29/ 

There is something new to be learnt everyday in the web world. Having worked for so long in this domain, it made me happy to realize this yet again when I came across a requirement to implement a simple pop-up with an arrow. However, there were many caveats to it

1. It was not a solid arrow but one which should appear as an extension of pop-up and a single border around the pop-up and arrow.

2. The pop-out could be placed anywhere around the trigger(left, right, bottom or top) depending on the available space

So here it goes

1. Create a rounded or straight rectangle or square as required for the pop-up

2. Create a small square and rotate it by -45Deg so that half of the square across the diagonal appears as a triangle/arrow

3. Now comes the fun part, in order to make it appear as an extension of the pop-up, there needs to be a box shadow applied to both the pop-up and the pointer but if we apply it to the pop-up then the box shadow overlaps the arrow instead of arrow overlapping the box-shadow.So we need a veil behind it in the same shape as pop-up

4. In order to hide half the square across diagonal, we need a veil in front it in the same shape as pop-up for consistency.

5. Both the required veils can be achieved by using ::after and ::before pseudo classes.
6. Ensure that the order is background-white veil(z-index: -1), arrow pointer(z-index: -2) and box-shadow(z-index: -3)
7. The arrow also needs to have the same background-color as box to ensure the box-shadow of the box is hidden

HTML:

<pre class="brush: ruby" name="code">
<div class='pop-out up'>

  <span class='arrow'></span>

  Pop Out with Arrow Using HTML and CSS only

</div>

<div class='pop-out down'>

  <span class='arrow'></span>

  Pop Out with Arrow Using HTML and CSS only

</div>

<div class='pop-out left'>

  <span class='arrow'></span>

  Pop Out with Arrow Using HTML and CSS only

</div>

<div class='pop-out right'>

  <span class='arrow'></span>

  Pop Out with Arrow Using HTML and CSS only

</div>

<pre>

CSS:

<pre class="brush: ruby" name="code">
.stretch {

  position: absolute;

  border-radius: 5px;

  width: 100%;

  height: 100%;

  left: 0px;

  top: 0px;

}



.pop-out {

  position: relative;

  border-radius: 5px;

  display: inline-block;

  width: 200px;

  height: 100px;

  padding: 5px;

  margin: 25px;



  .arrow {

    display: inline-block;

    position: absolute;

    background-color: white;

    width: 20px;

    height: 20px;

    transform: rotate(-45deg);

    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);

    z-index: -2;

  }



  &.up {

    .arrow {

      left: 50%;

      transform: translate(-50%, -75%) rotate(-45deg);

    }

  }



  &.down {

    .arrow {

      top: 100%;

      left: 50%;

      transform: translate(-50%, -50%) rotate(-45deg);

    }

  }



  &.left {

    .arrow {

      top: 50%;

      transform: translate(-75%, -50%) rotate(-45deg);

    }

  }



  &.right {

    .arrow {

      top: 50%;

      left: 100%;

      transform: translate(-50%, -50%) rotate(-45deg);

    }

  }



  &::before {

    content: " ";

    @extend .stretch;

    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);

    z-index: -3;

  }

  &::after {

    content: " ";

    @extend .stretch;

    background-color: white;

    z-index: -1;

  }

}

</pre>