ミギムキ

[CSS] ワークフロー図をペイントツールや画像を使わずに描きたい

やりたいこと

サンプルコード

html

<ol class="work_flow"> <li>開始フェイズ</li> <li>第一メイン・フェイズ</li> <li>戦闘フェイズ</li> <li>第二メイン・フェイズ</li> <li>最終フェイズ</li> </ol>
スポンサー広告

CSS

@media print, (min-width: 768px) { .work_flow { display: flex; justify-content: space-between; position: relative; z-index: 1; } .work_flow > li { min-height: 12em; padding: 2em 0.5em; margin: 0px; border-radius: 4em; background-color: #3388dd; color: #fff; font-size: 1.5vw; text-align: center; writing-mode: vertical-lr; -ms-writing-mode: tb-lr; list-style: none; } .work_flow > li:nth-child(1):before { position: absolute; top: 50%; left: 0px; z-index: -1; transform: translateY(-50%); width: calc(100% - 4em); height: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; background-color: #eee; content: ""; } .work_flow > li:nth-child(1):after { position: absolute; top: 50%; right: 1em; z-index: -1; transform: translateY(-50%); width: 0px; height: 0px; border: 2em solid transparent; border-left: 3em solid #eee; content: ""; } } @media screen and (max-width: 767px) { .work_flow { position: relative; z-index: 1; } .work_flow > li { max-width: 60%; padding: 1em 2em; margin: 0px auto; border-radius: 4em; background-color: #3388dd; color: #fff; text-align: center; list-style: none; } .work_flow > li:nth-child(n + 2) { margin: 5em auto 0px; } .work_flow:before { position: absolute; top: 0px; left: 50%; z-index: -1; transform: translateX(-50%); width: 2em; height: calc(100% - 5em); border-bottom-left-radius: 2em; border-bottom-right-radius: 2em; background-color: #eee; content: ""; } .work_flow:after { position: absolute; left: 50%; bottom: 1.5em; z-index: -1; transform: translateX(-50%); width: 0px; height: 0px; border: 2em solid transparent; border-top: 3em solid #eee; content: ""; } }

仕組み、解説、補足など

スポンサー広告