cssで図形のレイアウトを考えよう！！

概要

バックエンドをメインでやっているけどフロントを少し触った時にcssでつまずいて時間を取られる。
Vue.jsやReactの勉強をしていて基礎力はついてきたけど実装してみるとcssでつまずく。
意外とこんな経験をしている人は多いのでしょうか？

cssは極める必要はないと思いますが、ある程度簡単な図形くらいは実装した方が、デザインの幅なども広がってきます。
早速やってみましょう！！

今回の目標物

いたってシンプルですが、自分はこれが分からなくて結構苦労しました笑

まず簡単なレイアウト

index.html

<div class="item-list">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>

style.css

.item-list {
  display: flex;
  height: 200px;
  max-width: 1024px;
  margin: 0 auto;
}
.item {
  width: 33%;
}
.item:nth-child(1) {
  background-color: red;
}
.item:nth-child(2) {
  background-color: blue;
}
.item:nth-child(3) {
  background-color: yellow;
}

こんな感じだったら簡単に実装できます。
ただ今回やりたいのは右側は三角形でとんがらせたいですよね！
ここではborderを利用して実装していきます！

borderを使いこなす

まずはborderのイメージをつけていきましょう。

index.html

<div class="container"></div>

style.css

.container {
  width: 50px;
  height: 50px;
  border-top: 60px solid yellow;
  border-left: 60px solid pink;
  border-right: 60px solid red;
  border-bottom: 60px solid blue;
}

index.htmlとcssを書き換えていきます。
何をしているかと言うと、まずはcontainerをwidthとheightを50pxに指定します。
これで50pxの正方形ができます。
そしてそれぞれのborderを色を別にして実装しています。
こういった図形が出来上がります。

まずはもとの正方形があり、その周りをそれぞれのborderが囲んでいます。

ではこれをcontainerの幅と高さを調整したらどうなるでしょうか？

実はこうなるんです。
つまり中心から、三角形でborderが描かれる訳です。
ピンクの部分に注目してください！

右向きに三角形になっているのがわかるかと思います。
これ使えそうですね.

style.css

.container {
  width: 0px;
  height: 0px;
  border-top: 60px solid transparent;
  border-left: 60px solid pink;
  border-right: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

pink以外をtransparentで透明にしていきましょう！！
そうするとピンクの三角系だけになるはずです！！

ではここから実装していきましょう！

実装する

index.html

  <div class="list">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>

index.htmlをこちらに書き換えていきます。

まずは下準備として
レイアウトを整えていきます。

style.css

.list {
  display: flex;
  max-width: 1094px;
  margin: 0 auto;
}

.item {
  width: 34%;
  position: relative;
  text-align: center;
  height: 160px;
}

こちらで要素を横並びにして
itemの要素の幅と高さを指定しています。
ここでpositionをrelativeにしていることがポイントです。

style.css

.item::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom:80px solid transparent;
  position: absolute;
  right: -60px;
  z-index: 1
}

こちらを追加していきましょう！！
::afterは指定した要素の子要素に擬似要素を追加することができます。

contentの部分に文字を追加すると子要素に文字が入ることになるので、今回はから文字とします。
先ほどの様に三角形を作りたいのでwidthとheightは0を指定していきます。
topとbottomのborderをとり、transparentで透明にします。
ここでposition: absolutemで親要素にしていしたrerativeからの位置を決めていきます。

今回は右に三角形を向けたいので-60pxとします。
最後に要素の重なりを意識してz-indexを設定します。

z-indexはpositionプロパティがないと使えないので、基本positionとセットで使うと覚えておきましょう！

style.css

.list {
  display: flex;
  max-width: 1094px;
  margin: 0 auto;
}

.item {
  width: 34%;
  position: relative;
  text-align: center;
  height: 160px;
}
.item::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom:80px solid transparent;
  position: absolute;
  right: -60px;
  z-index: 1
}
.item:nth-of-type(1) {
  background: #F7F7F7;
}
.item:nth-of-type(1)::after {
  border-left: 60px solid #F7F7F7;
}
.item:nth-of-type(2) {
  background: #DDDDDD;
}

.item:nth-of-type(2)::after {
  border-left: 60px solid #DDDDDD;
}

.item:nth-of-type(3) {
  background: #C3C3C3;
}

.item:nth-of-type(3)::after {
  border-left: 60px solid #C3C3C3;
}

最終的なcssはこちらになります。

まずはそれぞれのitemの背景色を設定します
あとはそれぞれのafterの要素にborder-leftを足すだけです。
right: -60がきいているので右側に三角系が現れます。

事前にafter要素にz-index: 1を指定しているため重なった場合にborder-leftが上にきて図形が完成します！！！

cssは極める必要はそこまでないと思いますが、これくらいの図形は実装できる様にしておきましょう！！！
お疲れ様でした！！