ミギムキ

[CSS] ホームベース型のプロセスフロー図をCSSで描きたい

ホームベース型のフロー図

サンプルコード

html

<ol class="process"> <li>王宮の<br>戦士たち</li> <li>おてんば姫の<br>冒険</li> <li>武器屋<br>トルネコ</li> <li>モンバーバラの<br>姉妹</li> <li>導かれし者たち</li> </ol>
スポンサー広告

CSS

.process { display: flex; justify-content: center; padding: 0px; margin: 0px; font-size: 1.5vw; list-style: none; } .process > li { display: flex; justify-content: center; align-items: center; position: relative; padding: 1em 3em 1em 2em; margin: 0px; width: 10em; height: 10em; box-sizing: border-box; text-align: center; white-space: nowrap; overflow: hidden; } .process > li::before, .process > li::after { position: absolute; content: ""; } .process > li::before { top: 50%; right: -1.5em; z-index: -1; transform: translateY(-50%) scaleX(0.5) rotate(45deg); width: 12em; height: 12em; border: 0.3em solid currentColor; border-left: none; border-bottom: none; } .process > li::after { top: 0px; left: 0px; bottom: 0px; z-index: -1; width: 7em; border: 0.2em solid currentColor; border-right: none; }

サンプルコードの解説

.process > li::after { top: 0px; left: 0px; bottom: 0px; z-index: -1; width: 7em; border: 0.2em solid currentColor; border-right: none; } .process > li::before { top: 50%; right: -1.5em; z-index: -1; transform: translateY(-50%) scaleX(0.5) rotate(45deg); width: 12em; height: 12em; border: 0.3em solid currentColor; border-left: none; border-bottom: none; } 逆「く」の字型の部分を色づけしたサンプル
スポンサー広告