CSSでカスタムテーブルのレイアウト行を作成する方法

Question

CSSを使用して次の図を作成しようとしています。

私は境界線を回転させるなど、さまざまな方法を試しましたが、試したことのすべてが有望な結果につながるわけではありません。

CSSを使用して次の図を作成するにはどのような方法がありますか？

Answer 1

SVG（スカラーベクトルグラフィックス）を使ってこれらの図をプロットする方が簡単だと思います。ここでは、あなたが理解してくれたダイアグラムの例を示します。フレックスボックス、CSSグリッド、またはテーブルにすべてのSVGを置くことができます。

<svg height="200" width="200"> 
 
    <polyline points="20,20,60,60,20,100,60,60,120,60,160,20,120,60,160,100" style="fill:none;stroke:black;stroke-width:3" /> 
 
    <text x="10" y="60" fill="gray">WBC</text> 
 
    <text x="80" y="50" fill="gray">HGB</text> 
 
    <text x="80" y="80" fill="gray">Hct</text> 
 
    <text x="140" y="60" fill="gray">Plt</text> 
 
</svg>

数字は何を意味するのですか？

ポリライン座標前と次の接続時にXとY 座標の周りにカーソルを移動させる座標を利用し によりポリゴンを描画する機能を提供します。 SVG図の起点は、コンテナのtop-left (x=0,y=0) です。この図では、最初の位置を とし、ポリラインポイント アトリビュートの最初の2つの座標を（20,20）とします。そして、我々が（60,60）に点 （20,20）を接続（60,60）は、この製造に移動：同様

 
<svg height="200" width="200"> 
 
    <polyline points="20,20,60,60" style="fill:none;stroke:black;stroke-width:3" /> 
 
</svg>

、我々が移動（20,100）トレースバックすることを忘れないように、図のように （60,60）を再度使用します。 を保持することができないペン先と考えると、シート上にある間に移動する必要があります。 の唯一の方法は、パスをトレースすることです。

style="fill:none;stroke:black;stroke-width:3" 接続している行のプロパティを設定しましょう。 text tagを使用し、X とY座標を使用して簡単にテキストを追加できます。
周りを微調整してみてください:)希望、 助けてください。

あなたが検索し、ここでこれのより多くを参照することができます：純粋なCSSでhttps://www.w3schools.com/graphics/svg_intro.asp

Answer 2

この結果を達成するためにHTML5のキャンバスを使用することを検討してください。

簡単な導入のために、次のチュートリアルを参照してください。https://www.w3schools.com/html/html5_canvas.asp

HTML5のキャンバスはあなたが目指している効果を達成するために必要なツールを提供し、テキストや図形の両方を表示して操作できるようにする必要があります。

Answer 3

を、あなたはborderを使用して、最初-1を作成して、最初と最後の要素にrotateを変換し、再度内部span要素を回転させることができますテキストを通常に戻します。ここで

.el-1 { 
 
    display: flex; 
 
} 
 

 
.el-1 > div:first-child, 
 
.el-1 > div:last-child { 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    transform: rotate(45deg); 
 
} 
 

 
.el-1 > div:first-child { 
 
    border-top: 1px solid black; 
 
    border-right: 1px solid black; 
 
} 
 

 
.el-1 > div:last-child { 
 
    border-bottom: 1px solid black; 
 
    border-left: 1px solid black; 
 
} 
 

 
.el-1 > div > span { 
 
    transform: rotate(-45deg); 
 
    display: block; 
 
} 
 

 
.inner { 
 
    width: 70px; 
 
    text-align: center; 
 
    line-height: 25px; 
 
    padding: 0 10px; 
 
} 
 

 
.inner > div:first-child { 
 
    border-bottom: 1px solid black; 
 
}

<div class="el-1"> 
 
    <div><span>A</span></div> 
 
    <div class="inner"> 
 
    <div>B</div> 
 
    <div>C</div> 
 
    </div> 
 
    <div><span>D</span></div> 
 
</div>