二量の関係を示す図をhtmlとCSSで作る試み

授業で疲れたので、気分転換にクリエイティブな作業に逃避

目次(クリックでジャンプ)

試作アルファ

仮称 RelationBox(仮) 「R-box0」

材料はコレ

15

×0.8

12

÷0.8

作ってみる

前置される文章。前置される文章。前置される文章。

□の0.8倍は12
×0.8
12
÷0.8
□は12÷0.8です。

けっこう上手く出来た。これでPHPと組み合わせてhtmlプリントの量産ができる。

仕様

ボックス用のコンテナ「box-ctr1」に標準ボックス「D-box1」を入れて、その中に「R-box」を入れている

左の数(元の数)はクラス名「moto」左の数(元の数)はクラス名「saki」

右向きの矢印の数はクラス名「Rya」で付属要素で矢印を作った。before要素が矢印の本体でafter要素が先の部分。

この矢印の作成に手こずったのでメモしておく。

はじめ矢印の本体(before要素)をborder-radius50%の上ボーダーで作ろうとしたら両端が細くて見た目が悪いので、上と右にだけボーダーを持つ正方形を45°回転させて表現。

矢印の先(after要素)も同じ作りだが、尖った形状にするために三段階で変形させている(transform:rotate(-52deg) scaleX(0.6) rotate(45deg);)左から右に効果が上書きされてゆく。

before要素とafter要素の右下をそろえて良さげな位置に配置する。その上でtransform-originをbottom rightに設定して変形すると、位置合わせがラクチン。

タイトルとURLをコピーしました