Creating triangle in CSS using transform property and position relative property

 1) 

Here we have given the position: relative  to the div, that means it will refer to its' parent i.e., the body.

We have given position: absolute to the span , and span's and since the div has the position: relative property, it will become spans' parent and span will move referring the div when offset properties are used on it.