css -> pop up a layer with a small triangular arrow

 

The principle is to set position: relative;

Then set the display style to the element's :after , :before and position:absolute 

 

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}

#demo:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style>

 

 

************ Arrow up---------------

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  margin-top:50px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-bottom-color: #ccc;
  top: -18px;
  left:35px;
}

#demo:before {
  border-width: 14px;
  border-bottom-color: #333;
  
  left: 30px;
  top: -30px;
}
</style>