Creating visual triangles

You can create triangles with pure CSS, and you can use these triangles to create a triangular pointer for tooltips or other components of your project. In this recipe, you will learn how to use Bourbon to create tooltips with triangular pointers for your projects.

Getting ready

Make sure that you have installed Bourbon already, as described in the Bourbon mixins for prefixing recipe of this chapter.

How to do it...

The following steps help you to understand how to create pure CSS triangles with the Bourbon library:

1. After installing Bourbon, you should create the file and directory structure as shown in the following screenshot:
   
2. The sass/main.scss file should contain the SCSS code, as shown here:

   @import 'bourbon/bourbon';
   
   $tooltip-backgroundcolor: #ffffa5;
   $tooltip-color: #000;
   $tooltip-height: 4em;
   $tooltip-width: 8em;
   
   .tooltip {
     background-color: $tooltip-backgroundcolor;
     height: $tooltip-height;
     position: relative;
     width: $tooltip-width;
   
     h2...