【LESS系列】三角形Mixins

.triangle-el-simple(){
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
}

.triangle(@size){
  border: (@size / 2) solid transparent;
}

.triangle-left(@size: 20px, @color: #000, @offset: 0){
  &:before{
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent @color transparent transparent;
    border-left-width: 0;
    right: 100%;
    top: @offset;
  }
}

.triangle-inner-left(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent transparent transparent @color;
    border-right-width: 0;
    left: 0;
    top: @offset;
  }
}

.triangle-right(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent transparent transparent @color;
    border-right-width: 0;
    left: 100%;
    top: @offset;
  }
}

.triangle-inner-right(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent @color transparent transparent;
    border-left-width: 0;
    right: 0;
    top: @offset;
  }
}

.triangle-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent transparent @color transparent;
    border-top-width: 0;
    bottom: 100%;
    left: @offset;
  }
}

.triangle-inner-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: @color transparent transparent transparent;
    border-bottom-width: 0;
    top: 0;
    left: @offset;
  }
}

.triangle-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: @color transparent transparent transparent;
    border-bottom-width: 0;
    top: 100%;
    left: @offset;
  }
}

.triangle-inner-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size);
    border-color: transparent transparent @color transparent;
    border-top-width: 0;
    bottom: 0;
    left: @offset;
  }
}

.triangle-left-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-top: @size solid @color;
    top: 100%;
    border-left: 0 solid transparent;
    left: @offset;
  }
}

.triangle-inner-left-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-top: @size solid @color;
    border-left: 0 solid transparent;
    top: 0;
    left: @offset;
    margin-left: @size * (-1);
  }
}

.triangle-right-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-top: @size solid @color;
    top: 100%;
    border-right: 0 solid transparent;
    left: @offset;
  }
}

.triangle-inner-right-top(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-top: @size solid @color;
    top: 0;
    border-right: 0 solid transparent;
    left: @offset;
  }
}

.triangle-left-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-bottom: @size solid @color;
    bottom: 100%;
    border-left: 0 solid transparent;
    left: @offset;
  }
}

.triangle-inner-left-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-bottom: @size solid @color;
    bottom: 0;
    border-left: 0 solid transparent;
    left: @offset;
  }
}

.triangle-right-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-bottom: @size solid @color;
    bottom: 100%;
    border-right: 0 solid transparent;
    left: @offset;
  }
}

.triangle-inner-right-bottom(@size: 20px, @color: #000, @offset: 0){
  &:before {
    .triangle-el-simple();
    .triangle(@size * 2);
    border-bottom: @size solid @color;
    bottom: 0;
    border-right: 0 solid transparent;
    left: @offset;
  }
}
/*

triangle 系列 Mixins
Mixins 名称中的 left ，right ，top ，bottom 描述的是三角形中90度的那个角的指向

参数说明:
@size —— 三角的大小
@color —— 三角的颜色
@offset —— 三角的位置（如果 Mixins 名称是以 top 或者 bottom 为结尾，那此参数就调整水平位置。如果 Mixins 名称是以 left 或者 right 为结尾，那此参数就调整垂直位置）
*/

body {
  background: #fff;
}
.wrap {
  display: inline-block;
  background: #ff0;
  margin: 20px;
  padding: 10px;
  width: 240px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-align: center;
  position: relative;
}
.up{
  .triangle-bottom(10px, #f36);
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<div class="wrap up">Hello Sass! up</div>
</body>
</html>