東京都府中市のWEB制作会社Maromaroのブログです

スタイリッシュなフローチャート

  • RESULT
  • HTML
  • CSS
    • Flowchart
    • Flowchart
    • Flowchart
  • コピー
    <ul class="msr_flow05">
      <li><span>Flowchart</span></li>
      <li><span>Flowchart</span></li>
      <li class="active"><span>Flowchart</span></li>
    </ul>
  • コピー
    .msr_flow05 {
      color: #333333;
      counter-reset: section;
      list-style: none;
      overflow: hidden;
    }
    .msr_flow05 li {
      background:#FFFFFF;
      border-top:1px solid #999999;
      border-left:1px solid #999999;
      border-bottom:1px solid #999999;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #333333;
      display: inline-block;
      font-size: 18px;
      height:60px;
      margin:0 32px 0 0;
      min-width: 200px;
      padding: 18px 0 0 16px;
      position: relative;
      text-align: center;
      text-decoration: none;
    }
    .msr_flow05 li span{
      padding:0 0 4px
    }
    .msr_flow05 li:after {
      content: "";
      background:#FFFFFF;
      display: inline-block;
      height:56px;
      border-top: 1px solid #999999;
      border-right: 1px solid #999999;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      vertical-align: middle;
      width:56px;
      position:absolute;
      top:0;
      right:-19px;
      z-index:-1;
    }
    .msr_flow05 li:before {
      color:#CCCCCC;
      content:counters(section, ".") " ";
      counter-increment: section;
      font-size:32px;
      left:8px;
      line-height:1;
      margin:-16px 0 0;
      position:absolute;
      top:50%;
    }
    /* アクティブ */
    .msr_flow05 .active span{
      border-bottom:1px solid #999999;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

中に入っている数字はCSSでカウントしているので、要素を増やせば自動的に数が増えます。

  • このエントリーをはてなブックマークに追加

その他のフローチャート

  • Flowchart
  • Flowcart
  • Flowchart
マテリアルなフローチャート
  • Flowchart
  • Flowchart
  • Flowchart
フラットなフローチャート
  • Flowchart
  • Flowchart
  • Flowchart
無難なフローチャート
フローチャートの一覧をもっと見る

要素一覧