htmlとcssだけで編成表を作る

はじめに

みなさま、編成表というものはご存知でしょうか。
鉄道車両の組成を表した図を、編成表と言います。
今回は、そんな編成表をHTMLとCSSだけで作ります。

コード

<div class="hensei">
  <div class="corner_box01">1号車<br>1001</div><div class="renketsu"><br>－</div>
  <div class="corner_box00">2号車<br>1002</div><div class="renketsu"><br>－</div>
  <div class="corner_box00">3号車<br>1003</div><div class="renketsu"><br>－</div>
  <div class="corner_box00">4号車<br>1004</div><div class="renketsu"><br>－</div>
  <div class="corner_box02">5号車<br>1005</div>
</div>

.hensei{
  display:flex;
}
.corner_box01 {
  background: rgba(247, 17, 55, 0.8);
  width: 100px;
  height: 50px;
  position: relative;
}
.corner_box01:before {
    height: 0;
    display: block;
    position: absolute;
    left: 2px;
    content: "";
    border-top: solid 30px transparent;
    border-right: solid 30px transparent;
    top: 2px;
}
.corner_box01:after {
    height: 0;
    display: block;
    position: absolute;
    left: -3px;
    content: "";
    border-top: solid 30px #fff;
    border-right: solid 30px transparent;
    top: -3px;
    z-index: 2;
}

.corner_box02 {
  background: rgba(247, 17, 55, 0.8);
  width: 100px;
  height: 50px;
  position: relative;
}
.corner_box02:before {
    height: 0;
    display: block;
    position: absolute;
    right: -3px;
    content: "";
    border-top: solid 30px #fff;
    border-left: solid 30px transparent;
    top: -3px;
    z-index: 2;
}
.corner_box02:after {
    height: 0;
    display: block;
    position: absolute;
    right: -2px;
    content: "";
    border-top: solid 30px transparent;
    border-left: solid 30px transparent;
    top: -2px;
}

.corner_box00 {
  background: rgba(247, 17, 55, 0.8);
  width: 100px;
  height: 50px;
  position: relative;
}

.hensei div{
  text-align:center;
}

.hensei div:first-child{
  margin-left:0px;
}

終わりに

次回はこれを生成するプラグインでも作ろうかな.