css triangle - border

triangle-border.html

<style type="text/css">
.tri-down {

    /* Styling block element, not required */
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
    border-bottom: 1px solid #999;
    background: #f3f3f3;
  }

  /* Required for Down Triangle */
  .tri-down:before, .tri-down:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
  }

  /* Stroke */
  .tri-down:before {
    bottom: -16px;
    left: 21px;

    /* If 1px darken stroke slightly */
    border-top-color: #777;
    border-width: 16px;
  }

  /* Fill */
  .tri-down:after {
    bottom: -15px;
    left: 22px;
    border-top-color: #f3f3f3;
    border-width: 15px;
  }
</style>

triangle-border.less

.css-triangle-border(@direction:'up', @color: #000, @background: #fff, @height:10px, @thickness:1px, @position: 0px) {
  &:before, &:after  {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top: 0;
  }
  &:before {
    & when(@direction = 'up') {
      top: -1px * (@height + @thickness);
      left: @position - @thickness;
    }
    & when(@direction = 'bottom') {
      bottom: -1px * (@height + @thickness);
      left: @position - @thickness;
    }
    & when(@direction = 'left') {
      top: @position - @thickness;
      left: -1px * (@height + @thickness);
    }
    & when(@direction = 'right') {
      top: @position - @thickness;
      right: -1px * (@height + @thickness);
    }
    border-width: @height + @thickness;
    border-bottom-color: darken(@color, 20%);
  }
  &:after {
    & when(@direction = 'up') {
      top: -1px * @height;
      left: @position;
    }
    & when(@direction = 'bottom') {
      bottom: -1px * @height;
      left: @position;
    }
    & when(@direction = 'left') {
      top: @position;
      left: -1px * @height;
    }
    & when(@direction = 'right') {
      top: @position;
      right: -1px * @height;
    }
    border-width: @height;
    border-bottom-color: @background;
  }
}