【sass】ギザギザを作る

ギザギザというかジグザグのスタイルを作った。

See the Pen zigzag by nakasu (@nakasu) on CodePen.

コード

zigzag というクラス名の要素の擬似要素 :before や :after にジグザグを作る。

HTML:

<div class="zigzag">
  ジグザグ
</div>

scss:

@mixin zigzag($color, $height, $position) {
  @if $position != before and $position != after {
    @error "$positioin '#{$position}' must be either before or after.";
  }

  background-color: $color;
  position: relative;

  &:#{$position} {
    content: "";
    position: absolute;
    left: 0;
    height: $height;
    width: 100%;

    $deg: 30deg;
    $tan: 1 / 1.732;

    // $deg: 45deg;
    // $tan: 1;

    // $deg: 60deg;
    // $tan: 1.732;

    $box-h: 2 * $height;
    $box-w: $box-h / $tan;

    $is-before: if($position == before, true, false);

    @if $is-before {top: -$height;}
    @else {bottom: -$height;}

    $deg: if($is-before, $deg, 180deg - $deg);
    $ratio: if($is-before, 50%, 25%);

    background:
      linear-gradient($deg, $color $ratio, transparent $ratio),
      linear-gradient(360deg - $deg, $color $ratio, transparent $ratio);
    background-size: $box-w $box-h;
  }
}

.zigzag {
  @include zigzag(tomato, 10px, before);
  @include zigzag(tomato, 10px, after);
}

解説

zigzag というmixinを、ジグザグさせたい要素のスタイルにincludeする；

.zigzag {
  @include zigzag(tomato, 10px, before);
}

1つ目の引数が色、2つ目が高さ、3つ目が擬似要素名。

before だと上にジグザグ、after だと下にジグザグする。

ジグザグの角度を変えたい場合は、mixin zigzag の定義を直接編集する。

角度 $deg とその正接 $tan の値を書き換えてください。

不満点

sassは三角関数が使えないらしい。アホである。

なので、タンジェント $tan の値は自分で計算して用意した。

上のサンプルコードでは、ジグザグの角度は に固定してある。

と のコードもコメントアウトして用意しておいた。

参考

kuzlog.com

developer.mozilla.org