How to create hint boxes like Jquery basics > Creating A Password Confirmation Form?

Hi Maurits,

css triangles

Chris doesn't use pseudo elements in that article but that is what Andrew uses in the project and would probably be the preferred way to do it as these are purely visual.

From the project:

span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}

It works because adjoining borders are mitered at the corners. This creates the angles needed to make triangles.

I think the easiest way to visualize these triangles is to draw a square on a piece of paper. Then draw 2 diagonals through your square making an "X". This divides the square into 4 little triangles. The center point in the square represents the elements content box which has 0 width and height. The 4 triangles represent the elements 4 borders. If you were to color in the triangle on the right then you would have the orientation seen in the hint box.

If you look at the css above you will see that the border color is made transparent (0 opacity) and then the right border is given a fully opaque color.