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

対角線分割セクション

clip-pathで斜めに区切った2色のコンテンツを並べた静止構成です。WordPressの2つのサービス紹介や比較コーナーの背景装飾に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-05-split">
          <div class="d01-06-05-a"><span>DESIGN</span></div>
          <div class="d01-06-05-b"><span>DEVELOP</span></div>
        </div>

CSS

.prev.d01-06-05{padding:0;display:block;overflow:hidden}
        .d01-06-05-split{position:relative;width:100%;height:100%;min-height:260px}
        .d01-06-05-a,.d01-06-05-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
        .d01-06-05-a{background:#1d3557;clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
        .d01-06-05-b{background:#e9c46a;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
        .d01-06-05-a span{color:#fff;font-size:13px;font-weight:700;letter-spacing:.12em;margin-left:-30px}
        .d01-06-05-b span{color:#3a2f12;font-size:13px;font-weight:700;letter-spacing:.12em;margin-left:30px}

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