パーツ番号 01-03-07 ・ CSSのみ

斜めカット上端フッター

clip-path で上端を斜めにカットした濃色フッター。前セクションから鋭角に切り替わります。WordPressで動きのあるページ締めに使えます。

css

プレビュー

ソースコード

HTML

<div class="d01-03-07-wrap">
          <footer class="d01-03-07-ft">
            <div class="d01-03-07-inner">
              <div class="d01-03-07-logo">Diagonal Co.</div>
              <nav class="d01-03-07-nav">
                <a href="#">サービス</a>
                <a href="#">制作事例</a>
                <a href="#">会社概要</a>
                <a href="#">お問い合わせ</a>
              </nav>
              <div class="d01-03-07-copy">&copy; 2026 Diagonal Co.</div>
            </div>
          </footer>
        </div>

CSS

.d01-03-07-wrap{height:100%;background:#f1f5f9;display:flex;flex-direction:column;justify-content:flex-end}
        .d01-03-07-ft{background:#4c1d95;color:#e9d5ff;clip-path:polygon(0 22px,100% 0,100% 100%,0 100%);padding:34px 20px 20px}
        .d01-03-07-inner{text-align:center;font-size:11px}
        .d01-03-07-logo{color:#fff;font-weight:700;font-size:14px;margin-bottom:12px}
        .d01-03-07-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:14px}
        .d01-03-07-nav a{color:#e9d5ff;text-decoration:none;transition:color .25s}
        .d01-03-07-nav a:hover{color:#fff}
        .d01-03-07-copy{color:#a78bda;font-size:10px}

クラス名 .d01-03-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。