<body>
  <div class="triangle-bottom"></div>
</body>
// Aqui temos a função 
@function triangle-height($width)
  @return $width * sqrt(3) / 2

// Aqui temos o mixin pra criar um triângulo
@mixin triangle($direction, $width, $color)
  content: ""
  display: block
  width: 0
  height: 0
  border-style: solid

  @if $direction == bottom
    border-width: 0 $width $width 0
    border-color: transparent transparent $color transparent

// Aqui aplicamos o mixin a um elemento
.triangle-bottom
  @include triangle(bottom, 100px, gold)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.