CSSのみか画像も使って斜辺角度自動調整の斜めに見えるパーツを作る

条件的に実現が難しく、試行錯誤するも上手くいかなかったことが、一部に問題はあるもののある程度実現できたのでメモとして。

見映えが綺麗とは言い難いかもしれず、実用性はないかもしれません。

実現したいこと

実現したいことは以下の通り。

• CSSで背景だけが斜めになってるよう見えるようにする
• コンテンツのラッピング要素に背景色があっても問題が起きない
• 高さは一定で、斜辺の角度が自動で変わる

もともと色面を斜めにしたようなデザインを実現する方法はいくつかあるのですが、疑似要素を斜めにしてz-indexを操作するタイプは以下のような部分が問題になって使えないことが何度かありました。

1. コンテンツ部分に背景色があるとその下に潜り込んでしまう
2. 斜辺の角度がそのままなので無駄な余白が生じ得る(=斜めの部分の高さを固定出来ない)

1に関しては関連する要素全てにz-indexを付けるなどで対応できるとは思いますが、これだけのために多くの要素を調整をするのは避けたい。

2に関しては、overflot:hidden;を設定した高さ固定のラッピング要素が必要となるため、ブラウザサイズが縮むほど斜辺の頂点とラッピング要素の上下に余計な余白が入ります。

今回はこれらの問題をどうにかできないかと検討した案です。

サンプル

以下がサンプルですが、ブラウザの幅をある程度狭めてもらわないと変化が確認できないので、その点はご了承ください。

狭めれば、高さは変わらずに斜辺の角度がブラウザの横幅(当サンプルではコンテンツ部分の横幅)によって変化することを確認出来るはずです。

また、いくつか問題があるためその点は後述します。

<div class="box">
このdivの上下に斜めのパーツが付いています。
</div>

.box {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 1em;
  color: #fff;
  background-color: #17c2c6;
}
.box::before, .box::after {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
  content: '';
}
.box::before {
  bottom: -19px;
  background-image: linear-gradient( to right bottom, #17c2c6 50% , #fff 52%,#fff 100%);
}
.box::after {
  top: -19px;
  background-image: linear-gradient( to left top, #17c2c6 50% , #fff 52%,#fff 100%);
}

問題点

CSSグラデーションを使っているため、主に色の境目の奇麗さに関する点で問題があります。

斜辺が滑らかに見えない

このコードは2色を指定していますが、50%同士だとなめらか斜線ではなく段差の付いた斜線に見えてしまいます。

これを解決するため、50%と52%にして、アンチエイリアスを効かせるようなイメージで色の境目をボカして奇麗に見せています。

IEで意図した表示にならない

CSSグラデーションを使っているためIE9+ではあるのですがIE10やIE11でも、50%と52%にするとぼけ幅が大きくなり見映えがおかしくなります。

そのため以下のように指定することでIEでも意図した形になります。

• 50%と50%にする

しかし前述のように他のブラウザでは奇麗に見えないので、IE切り捨てが前提になりそうです。

ラッピング要素の背景が単色である必要がある

片方の色をtransparentにすることで、仕組み上は背景に模様があっても対応可能です。

ですが実際に試すと、スマホなどデバイスやブラウザによっては斜線に黒っぽい色が入るなど奇麗には見えませんでした。

そのため対策としてラッピング要素の背景色と同じ色を設定する必要があります。

画像を使う別の方法

結構な力技になりますが、画像を使えばIE(IE9+)でも背景に模様があってもある程度のものが作れます。

HTMLは前項と同じなので省き、CSSは変更した疑似要素の部分だけ記載します。

.box::before, .box::after {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
  content: '';
  background-size: 100% 20px;
}
.box::before {
  top: -19px;
  /*事前に透過pngで上向きの三角形の画像を作る*/
  background-image: url(images/triangle-top.png);
}
.box::after {
  bottom: -19px;
  /*事前に透過pngで下向きの三角形の画像を作る*/
  background-image: url(images/triangle-bottom.png);
}

仕組みはいたって簡単です。

透過PNGで作った画像はbackground-sizeの指定でアスペクト比に関わらず変形可能なので、縦固定で横だけ100%にすれば実現できます。

三角形の画像のサイズはどんなサイズでもかまいませんが、一番奇麗に見えて欲しいブラウザサイズに合わせて作ると実用に足る見映えになるかもしれません。

結び

この記事の手法では奇麗に手軽に多くのブラウザでというのは無理そうで、あまり実用的でないというのが結論になりそうです。