下向きの矢印のような形（V字のような形）のサイトを作りたいが、コーディング方法が分からない。

Question

HTMLとCSSを使って、図のようなWebサイトを作りたいです
（この図は実は私のコーディング事例1をスクリーンショットでとったものです。私のコーディングは後で示します。）。

問題は、灰色のグラデーションの部分の作り方です。
この部分には文章や画像が入るのですが、最後は、下向きにとがっているような形（Vの字のような形）にしたいと考えています。
このWebサイトで難しいと感じている点は2点あり、

1点目は灰色の部分のグラデーションをどのように作るのか？　という点です。
仮にこの点がグラデーションではなく、べた塗りであれば、四角形と下向きの三角形をつくって組み合わせる、という方法を採ることが考えられます。ですがグラデーションのため、うまく色の調整をするのが難しい気もします。

2点目は、下向きにとがっている部分（灰色のグラデーションと黄色の間）に灰色で線が引かれていることです。この線をどのように表現するのかが悩ましいです。

このようなサイトをどのようにして作ったらいいか？　というのが今回の質問です。

参考までに私の作った方法を記載すると、私は以下のようにしてこのサイトを作りました
（コーディング事例1。500pxとか300pxとかの長さについては適当に入れています。この部分は、本来は本文の分量によって変化します。）。

clip-pathを使うことで、下向きにとがっている部分（V字の部分）を作っています。
そして灰色の線の部分（灰色のグラデーションと黄色の間）はボックスの長さを少しずつずらすことで作成しています
（長さの%を少しずつ変えることで作成しています）。

<div class="block">
    <h2>タイトル</h2>
    <div class="block__under">
        <div class="block__middle">
            <div class="block__up">
                ここに文章を入れる
            </div>
        </div>
    </div>
</div>
<div class="block-2"></div>

.block__under {
    background-color: yellow;
}

.block__middle {
    background-color: #c8c8c8;
    clip-path: polygon(0 0, 100% 0, 100% 89%, 50% 100%, 0 89%);
}

.block__up {
    height: 500px;
    background-image: linear-gradient(to bottom, #c8c8c8, #eeeeee);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 99%, 0 88%);
}

.block-2 {
    height: 300px;
    background-color: yellow;
}

しかしながら、私の作成方法は良くないと思っています。
なぜなら私の作成方法だと、本文に文章や画像を大量に記載した場合、サイトがどんどん縦に長くなるのですが、それに伴い、V字の角度もどんどん鋭くなるためです。V字の角度が鋭くなると、これまでは表示されていた部分が表示されなくなります。
（実はスマホサイトとパソコンサイトでも、V字の角度が異なるため、表示内容が見えたり見えなかったりします。）

これを防ぐためには、本文の分量の変化に伴い、私の設定した%も修正する必要があるのですが、それはかなり手間がかかります。
本文の分量が変化してもV字の角度が変化しないようなサイトを作りたいです。

また他の方法として、以下の方法も考えました（コーディング事例2）。

<h2>タイトル</h2>
<div class="block">
    <p>ここに文章を入れる</p>
</div>
<div class="block-2"></div>

*,
*::before,
*::after {
    box-sizing: border-box;
}

.block {
  height: 500px;
  background-image: linear-gradient(to bottom, #c8c8c8, #eeeeee);
  position: relative;
  overflow-x: hidden;
}
.block::before, .block::after {
  content: "";
  display: block;
  width: 50vw;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-color: yellow;
}
.block::before {
  left: 0;
  border-right: 20px solid #c8c8c8;
  transform: skew(70deg);
  transform-origin: bottom center;
}
.block::after {
  right: 0;
  border-left: 20px solid #c8c8c8;
  transform: skew(-70deg);
  transform-origin: bottom center;
}

.block-2 {
  height: 300px;
  background-color: yellow;
}

この方法は疑似要素を作り、疑似要素をskewで変化させる方法です。
先ほどの作り方とは異なり、本文が増えてもV字の角度が鋭くなるということはありません。
その点は優れているのですが、V字の頂点のところの重なり方が、きれいではないです。

これらの例のように、色々考えてはみたものの、満足のいくコーディングに仕上がっていません。
私の考えた方法とは全く違う方法でも構いませんので、なるべく簡便な、手間ひまのかからない方法でこのサイトを作りたいと考えています。
何らかのアイデアをお持ちの方のお知恵をお借りしたいです。

よろしくお願いします。

Answer 1

最初のサンプルのHTMLはそのままで、CSSを下記のようにしたらどうでしょう。

.block__middle {
  background-color: #c8c8c8;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw));
}

.block__up {
  height: auto;
  background-image: linear-gradient(to bottom, #c8c8c8, #eeeeee);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw));
  transform: translatey(-5px);
  padding-bottom: 10vw;
}

境界線の角度はcalc(100% - 10vw)の部分のvwの数値で、
境界線の太さは、transform: translatey(-5px); のpxの数値で、
調整してください。

padding-bottom: 10vw; は中身のコンテンツがclip-pathによって隠れるのを防ぐ目的です。

CodePenサンプル

別案

解決済みですが、デザインレイアウトのためにHTMLに不必要な要素を追加しているのが気になりましたので、質問の2つ目のサンプルのHTMLで実現する方法も提示しておきます。

.block {
  background-color:  #c8c8c8;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw));
  padding-bottom: 10vw;
  position: relative;
}
.block::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(to bottom, #c8c8c8, #eeeeee);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw));
  z-index: -1;
  transform: translatey(-5px);
}
.block-2 {
  height: 300px;
  background-color: yellow;
  margin-top: -12vw;
  padding-top: 12vw;
}

背景のグラデーションはbefore疑似要素につけて背面に配置します。
translatey()で上にずらして親要素のグレーの背景が見えるようにして境界線とします。
次のブロックは、ネガティブマージンで重ねます。

CodePenサンプル

Comments

[cheshire-cat]

お返事が遅くなり、申し訳ありません。
日中は仕事をしているため、確認が遅れました。

コードを拝見しましたが、大変スマートな記述であり、手間が大幅に削減されていると思います。
感心したところを書くと、
・2つのブロックの5角形の記述が全く同一なので、作成の（計算の）手間が省ける
・transformを使って差を表現する方法は思いつきませんでした。また5pxという固定単位を使った点にも感心しました。なぜなら質問文には書き忘れていたのですが、私のように差を%で表現すると、本文の分量が増えるに従い、灰色の線がどんどん太くなってしまうという問題があったためです。
・5角形の作り方で、vwを使っているため、本文が増えても、角度の大幅な変化がない。
といったところです。

大変役に立ちました。ありがとうございます。