[CSS] ワークフロー図をCSSだけで描きたい（要素の間に矢印を配置）

公開日:2018/10/15 更新日:2021/05/26

この記事でワークフロー図をCSSで書いてみました。今回はその別バージョンになります。

前回は背景に矢印を置く形でしたが、今回はブロックとブロックの間に矢印マークを置く形式です。

レスポンシブにも対応して、モバイル表示時には縦並びになります。

サンプルコード

html

<ol class="work_flow ">
    <li><span>幼年期</span></li>
    <li><span>成長期</span></li>
    <li><span>成熟期</span></li>
    <li><span>完全体</span></li>
</ol>

CSS

@media screen and (max-width: 767.98px) {
    .work_flow {
        list-style: none;
    }
    .work_flow > li {
        position: relative;
        padding: 1em;
        margin: 0px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
    .work_flow > li:first-child {
        padding-top: 0px;
    }
    .work_flow > li:last-child {
        padding-bottom: 0px;
    }
    .work_flow > li:nth-child(n + 2)::before {
        position: absolute;
        top: 0px;
        left: 50%;
        width: 0.5em;
        height: 0.5em;
        transform: translateY(-75%) rotate(135deg);
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        content: "";
    }
    .work_flow > li > span {
        display: block;
        padding: 1em;
        margin: 0px auto;
        border: 1px solid #3388dd;
    }
}
@media print, (min-width: 768px) {
    .work_flow {
        display: flex;
        justify-content: space-between;
        list-style: none;
    }
    .work_flow > li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        margin: 0px;
        width: 100%;
    }
    .work_flow > li + li::before {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 0.5em;
        height: 0.5em;
        transform: translateX(-75%) translateY(-50%) rotate(45deg);
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        content: "";
    }
    .work_flow > li > span {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 3em;
        height: 10em;
        border: 1px solid #3388dd;
        font-size: 20px;
        font-weight: bold;
        writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
    }
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。