Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="tips">
  <span class="caret"></span>
  我是一个tooltip
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin caret($position,$caret-width,$border-width,$direction,$border-color,$background-color){
  position: $position;
  
  &:before,
  &:after {
    content:"";
    position: absolute;
  }
  @if $direction == top {
    &:before {
      top:0;
      left: 0;
      border-bottom: $caret-width solid $border-color;
      border-left: $caret-width solid transparent;
      border-right: $caret-width solid transparent;
    }
    &:after {
      left: $border-width;
      top: $border-width;
      border-bottom: ($caret-width - $border-width) solid $background-color;
      border-left: ($caret-width - $border-width) solid transparent;
      border-right: ($caret-width - $border-width) solid transparent;
    }
  }
  @else if $direction == right {
    &:before {
      top:0;
      left: 0;
      border-left: $caret-width solid $border-color;
      border-top: $caret-width solid transparent;
      border-bottom: $caret-width solid transparent;
    }
    &:after {
      left: 0;
      top: $border-width;
      border-left: ($caret-width - $border-width) solid $background-color;
      border-top: ($caret-width - $border-width) solid transparent;
      border-bottom: ($caret-width - $border-width) solid transparent;
    }
  }
  @else if $direction == bottom {
    &:before {
      top:0;
      left: 0;
      border-top: $caret-width solid $border-color;
      border-left: $caret-width solid transparent;
      border-right: $caret-width solid transparent;
    }
    &:after {
      left: $border-width;
      top: 0;
      border-top: ($caret-width - $border-width) solid $background-color;
      border-left: ($caret-width - $border-width) solid transparent;
      border-right: ($caret-width - $border-width) solid transparent;
    }
  } 
  @else if $direction == left {
    &:before {
      top:0;
      left: 0;
      border-right: $caret-width solid $border-color;
      border-top: $caret-width solid transparent;
      border-bottom: $caret-width solid transparent;
    }
    &:after {
      left: $border-width;
      top: $border-width;
      border-right: ($caret-width - $border-width) solid $background-color;
      border-top: ($caret-width - $border-width) solid transparent;
      border-bottom: ($caret-width - $border-width) solid transparent;
    }
  }
}
.tips {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 20px auto;
  border: 1px solid orange;
  border-radius: 3px;
  
  .caret {
    top: -10px;
    left: 10px;
    @include caret(absolute,10px,1px,top,orange,#fff);
  }
}

SassMeister-output.css

.tips {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 20px auto;
  border: 1px solid orange;
  border-radius: 3px;
}
.tips .caret {
  top: -10px;
  left: 10px;
  position: absolute;
}
.tips .caret:before, .tips .caret:after {
  content: "";
  position: absolute;
}
.tips .caret:before {
  top: 0;
  left: 0;
  border-bottom: 10px solid orange;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.tips .caret:after {
  left: 1px;
  top: 1px;
  border-bottom: 9px solid #fff;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

SassMeister-rendered.html

<div class="tips">
  <span class="caret"></span>
  我是一个tooltip
</div>