前回の記事を公開したところ、いくつかのご意見をいただきました。
それらを基に、より良い実装がないかを再考してみました。


この実装は、linear-gradientでグラデーションさせずに単色の斜めになったイメージを表現することで、前回の記事で紹介したものよりも圧倒的にシンプルなコードになっています。ですが、この実装だとジャギって見えてしまうのがイマイチです。


まさにこういうときのためにSVGですが、background-imageとして利用するためには外部ファイルにしなければならないので管理の手間が増えそう、という勘違いをしていました。
どうやら、SVGはdataURIとしてCSSに埋め込んで利用できるようです。
つまり、よりシンプルな実装で見た目もジャギらず、CSSだけで完結して管理することができるということが判明しました。

ということで実装しました。

<div class="container">
  <div class="container__inner">
    <!-- do stuff... -->
  </div>
</div>
@mixin v-shaped-container-next($gap, $bg-color) {
  &::before,
  &::after {
    content: "";
    display: block;
    height: $gap;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  &::before {
    background-image: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" preserveAspectRatio="none">\
        <path d="M0 1l1-1v1z" fill="#{$bg-color}"/>\
      </svg>');
  }

  &::after {
    background-image: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" preserveAspectRatio="none">\
        <path d="M0 0l1-0v1z" fill="#{$bg-color}"/>\
      </svg>');
  }

  &__inner {
    padding: 1rem;
    background-color: $bg-color;
  }
}

.container {
  @include v-shaped-container-next(100px, rgba(#000,.6));

  color: #fff;
}

これが動いているそれです。

この度はみなさまのお力添えによって、最高の実装をこの手にすることができました。
今後とも最高のCSSを書いていくため、引き続きよろしくお願い致します。