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

斜めクリップ分割レイアウト

斜めのclip-pathで2領域に分割し、ホバーした側が広がるレイアウト。料金プランやサービス比較の見出しセクションに活用できます。

hovercss

プレビュー

ソースコード

HTML

<div class="d01-13-03-wrap">
          <div class="d01-13-03-pane d01-13-03-a"><span>PLAN A</span></div>
          <div class="d01-13-03-pane d01-13-03-b"><span>PLAN B</span></div>
        </div>

CSS

.prev.d01-13-03{padding:0}
        .d01-13-03-wrap{position:relative;width:100%;height:230px;overflow:hidden;background:#111827}
        .d01-13-03-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:clip-path .5s cubic-bezier(.2,.7,.3,1)}
        .d01-13-03-pane span{color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em}
        .d01-13-03-a{background:linear-gradient(135deg,#7c3aed,#4c1d95);clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
        .d01-13-03-b{background:linear-gradient(135deg,#059669,#047857);clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
        .d01-13-03-wrap:has(.d01-13-03-a:hover) .d01-13-03-a{clip-path:polygon(0 0,80% 0,64% 100%,0 100%)}
        .d01-13-03-wrap:has(.d01-13-03-a:hover) .d01-13-03-b{clip-path:polygon(80% 0,100% 0,100% 100%,64% 100%)}
        .d01-13-03-wrap:has(.d01-13-03-b:hover) .d01-13-03-b{clip-path:polygon(36% 0,100% 0,100% 100%,20% 100%)}
        .d01-13-03-wrap:has(.d01-13-03-b:hover) .d01-13-03-a{clip-path:polygon(0 0,36% 0,20% 100%,0 100%)}

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