Badges con SASS y SVG

Mixing Sass para crear Badges que puedan ser modificados y adaptados mediante parámetros
Badges con SASS y SVG

Código css Badge

He construido badges con sass y svg. Mediante mixins de sass he creado el fondo del badge, en el que se puede personalizar el ancho, el color y el margen superior pasando los parámetros. El primer parámetro es el ancho en px (sin indicar la unidad), el siguiente el color y el último el margen al elemento superior (sin indicar la unidad).

body {
  @include badge-generator(90, #ff1744, 200);
}

Lo he incluido (@include) en el body para que se genere el css a partir de sass. Dichos elementos se van a generar a partir de la función @mixin. El código no tiene misterio, son operaciones para formar un hexágono.

@mixin badge-generator($width: 94, $color: #ff1744, $margin_top: 0) {
    $middle_width: $width/2;
    $height: ($width/2) * 1.154700538;
    $border_top: $height/2;

    text-align: center; //center image
    margin-top: unquote( $margin_top + 'px');

    .hexagon-draw {
        display: inline-block;
        margin-right: 10px;

        .hexagon-construct-top {
            width: 0;
            border-bottom: unquote( $border_top + 'px') solid $color;
            border-left: unquote( $middle_width + 'px') solid transparent;
            border-right: unquote( $middle_width + 'px') solid transparent;
        }
        .hexagon-construct-middle {
            width: unquote( ($width) + 'px');
            height: 54px;//width/2*1,154700538
            height: unquote( ( ($width/2) * 1.154700538 ) + 'px');
            background-color: $color;
        }
        .hexagon-construct-bottom {
            width: 0;
            border-top: unquote( $border_top + 'px') solid $color;
            border-left: unquote( $middle_width + 'px') solid transparent;
            border-right: unquote( $middle_width + 'px') solid transparent;
        }
        .hexagon-picture {
            position: relative;
            top: unquote( (-0.83 * $width) + 'px');
            height: 0;
            img {
                max-height: unquote( $middle_width + 'px');
            }
        }
    }
}

Código html Badge

Para usarlo en el html hay que seguir la siguiente estructura:

<div class="box-badge">
    <div class="hexagon-draw">
        <div class="hexagon-construct-top"></div>
        <div class="hexagon-construct-middle"></div>
        <div class="hexagon-construct-bottom"></div>
        <div class="hexagon-picture">
            <img src="img/badge.svg" alt="Title Badge">
        </div>
    </div>
    <div class="hexagon-draw">
        <div class="hexagon-construct-top"></div>
        <div class="hexagon-construct-middle"></div>
        <div class="hexagon-construct-bottom"></div>
        <div class="hexagon-picture">
            <img src="img/dollar-symbol.svg" alt="Title Dollar Symbol">
        </div>
    </div>
</div>

Pen con ejemplo de Badge Sass Svg

En la etiqueta de imagen se le añade la imagen, puede ser en cualquier formato, pero usando "svg" se adaptará mejor a diferentes tamaños o escalados. El código completo para probarlo se encuentra en mi GitHub.