パーツ番号 01-01-05 ・ CSSのみ

斜めクリップ2分割ヒーロー

clip-pathで斜めに分割した2色レイヤーがホバーで滑らかに変形。WordPressのブランドサイトやリニューアル告知ページに個性を与えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d01-01-05-hero">
          <div class="d01-01-05-layer"></div>
          <div class="d01-01-05-inner">
            <h1>ふたつの色が、<br>ひとつの物語に。</h1>
            <p>カーソルを重ねると、境界線がゆるやかに動きます。</p>
          </div>
        </div>

CSS

.prev.d01-01-05{padding:0;display:block;min-height:320px}
        .d01-01-05-hero{position:relative;height:320px;overflow:hidden;background:linear-gradient(135deg,#f7f3ea 0%,#efe6d4 100%);display:flex;align-items:center}
        .d01-01-05-layer{position:absolute;inset:0;background:linear-gradient(135deg,#173753 0%,#2a5a8c 100%);
          clip-path:polygon(0 0,62% 0,38% 100%,0 100%);
          transition:clip-path .6s cubic-bezier(.25,.8,.25,1)}
        .d01-01-05-hero:hover .d01-01-05-layer{clip-path:polygon(0 0,48% 0,58% 100%,0 100%)}
        .d01-01-05-inner{position:relative;padding:24px 24px 24px 32px;max-width:60%}
        .d01-01-05-hero h1{color:#fff;font-size:22px;font-weight:700;line-height:1.55;letter-spacing:.05em;margin:0 0 12px}
        .d01-01-05-hero p{color:rgba(255,255,255,.75);font-size:12px;line-height:1.9;margin:0}

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