本文讲述基于SCSS编写样式实现角标。参考上文【WEB：将i清楚CSS、Less、Sass、Scss】。实现后的效果如下图：

原理

CSS有一个特性，就是可以指定一个矩形框边框的宽度，以及其颜色。如下图：

然后缩小矩形框本身的尺寸，例如从300px改为100px：

然后继续直到矩形的长度和宽度都是0，就会看到一个完全由边组成的矩形，如下图：

然后我们来改变边的颜色，例如

这样就可以绘制出三角形了，当然也可以搞成沙漏型，和带上圆角。

实现

使用绝对定位，将三角形布局到指定位置，并通过z-index遮挡，实现条带。然后通过文本框绝对定位，并旋转到指定位置。

绝对定位一个大的三角形布局到特定位置。

.script-tag-container {
  margin: 1rem;
  position: relative;
  height: 100px;
  border: 1px solid #efefef;
  background-color: #efefef;
  border-radius: 5px;
}
.script-tag-container .rb-large {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-top: 30px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 30px solid red;
  border-right: 30px solid red;
  z-index: 0;
}
.script-tag-container .rb-small {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #efefef;
  border-right: 10px solid #efefef;
  z-index: 1;
}
.script-tag-container .rb-text {
  position: absolute;
  color: white;
  width: 84.8528137424px;
  height: 84.8528137424px;
  font-size: 1rem;
  text-align: center;
  transform-origin: center center;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-end; /* 垂直靠底部 */
  transform: rotate(-45deg); /*逆时针旋转*/
  bottom: 0;
  right: 0;
}

SCSS

定义相应的变量

/*_vars.scss*/
$script-tag-background-color: #efefef;

$script-tag-raduis: 5px;

$script-tag-angle: 45deg;

$cos-script-tag-angle: cos($script-tag-angle);
$sin-script-tag-angle: sin($script-tag-angle);

定义函数

/*_index.scss*/
@import 'vars';

@mixin script-tag-text($edge-length:2rem,$mode:"rb",$font-color:white,$font-size:0.75rem){
    position: absolute;
    color: $font-color;
    width: $edge-length / $sin-script-tag-angle;
    height: $edge-length / $cos-script-tag-angle;
    font-size: $font-size;
    text-align: center;
        
    transform-origin: center center;

    

    @if $mode == "rb"{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-end; /* 垂直靠底部 */
        transform: rotate(calc(-1 * $script-tag-angle)); /*逆时针旋转*/
        bottom: 0;
        right: 0;
    }@else if $mode == "rt"{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-start; /* 垂直靠底部 */
        transform: rotate($script-tag-angle);/*正时针旋转*/
        top: 0;
        right:0;
    }@else if $mode == "lt"{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-start; /* 垂直靠顶部 */
        transform: rotate(calc(-1 * $script-tag-angle)); /*逆时针旋转*/
        
        top: 0;
        left: 0;
    }@else if $mode == "lb"{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-end; /* 垂直靠底部 */
        transform: rotate($script-tag-angle);/*正时针旋转*/
        left: 0;
        bottom:0;
    }

}

@mixin script-tag-triangle($edge-color:red,$edge-length:2rem,$mode:"rb"){
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    @if $mode == "rb"{
        bottom: 0;
        right: 0;
        border-top:$edge-length solid transparent;
        border-left:$edge-length solid transparent;
        border-bottom:$edge-length solid $edge-color;
        border-right:$edge-length solid $edge-color;
    }@else if $mode == "lt"{
        top: 0;
        left: 0;
        border-top:$edge-length solid $edge-color;
        border-bottom:$edge-length solid transparent;
        border-left:$edge-length solid $edge-color;
        border-right:$edge-length solid transparent;
    }@else if $mode == "lb"{
        bottom:  0;
        left: 0;
        border-top:$edge-length solid transparent;
        border-bottom:$edge-length solid $edge-color;
        border-left:$edge-length solid $edge-color;
        border-right:$edge-length solid transparent;
    }@else if $mode == "rt"{
        top: 0;
        right: 0;
        border-top:$edge-length solid $edge-color;
        border-right: $edge-length solid $edge-color;
        border-bottom:$edge-length solid transparent;
        border-left:$edge-length solid transparent;
    }
}

.script-tag-container{
    margin: 1rem;
    position: relative;
    height: 100px;
    border: 1px solid $script-tag-background-color;
    background-color: $script-tag-background-color;
    border-radius: $script-tag-raduis;

    .rb-large{
        @include script-tag-triangle(red, 30px,"rb" );
        z-index: 0;
    }
    .rb-small{
        @include script-tag-triangle($script-tag-background-color, 10px,"rb" );
        z-index: 1;
    }
    .rb-text{
        @include script-tag-text(60px,"rb",white ,1rem)
    }


    
    .rt-large{
        @include script-tag-triangle(orange, 30px,"rt" );
        z-index: 0;
    }
    .rt-small{
        @include script-tag-triangle($script-tag-background-color, 10px,"rt" );
        z-index: 1;
    }
    .rt-text{
        @include script-tag-text(60px,"rt",white ,1rem)
    }

    .lt-large{
        @include script-tag-triangle(blue, 30px,"lt" );
        z-index: 0;
    }
    .lt-small{
        @include script-tag-triangle($script-tag-background-color, 10px,"lt" );
        z-index: 1;
    }
    .lt-text{
        @include script-tag-text(60px,"lt",white ,1rem)
    }

    .lb-large{
        @include script-tag-triangle(green, 30px,"lb" );
        z-index: 0;
    }
    .lb-small{
        @include script-tag-triangle($script-tag-background-color, 10px,"lb" );
        z-index: 1;
    }
    .lb-text{
        @include script-tag-text(60px,"lb",white ,1rem)
    }
}