triangleCss.md

CSS Draw Triangle

SOURCE, SOURCE

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

Example of triangles at corner like this:

#bottom-container {
  position: relative;
  background-color: $color_blue;
  padding: 80px;
  overflow: hidden;

  .triangle-base-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }

  .triangle-dark-top {
    @extend .triangle-base-top;
    border-top: 0 solid $triangle-blue-dark;
    border-left: 700px solid $triangle-blue-dark;
    border-bottom: 100px solid transparent;
  }

  .triangle-light-top {
    @extend .triangle-base-top;
    border-top: 0 solid $triangle-blue-light;
    border-left: 700px solid $triangle-blue-light;
    border-bottom: 200px solid transparent;
  }

  .triangle-base-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
  }

  .triangle-dark-bottom {
    @extend .triangle-base-bottom;
    border-top: 100px solid transparent;
    border-bottom: 0 solid $triangle-blue-dark;
    border-right: 700px solid $triangle-blue-dark;
  }

  .triangle-light-bottom {
    @extend .triangle-base-bottom;
    border-top: 200px solid transparent;
    border-bottom: 0 solid $triangle-blue-light;
    border-right: 700px solid $triangle-blue-light;
  }
}