CSS border サンプル

border の幅や色を変えるとどうなるか？

・https://css-tricks.com/examples/ShapesOfCSS/

その 1

1: 幅 1px の border

2: 幅を変える width: 50px;

3: 各縁の色を変える

3-1: height: 0;

3-2: width: 0; height: 0;

4-1: border-top なし

4-2: border-bottom を大きくした

4-0: 赤色以外を透明 (transparent) にした

4-4: 右だけ残した

4-5: 左だけ残した

5-1: border-left なし

5-02: 矢印らしきマーク

6-1: border-right なし

6-2: 矢印らしきマーク

その2

少しひねってみる。HTML を簡易ドロー代わりに使えるか？。
div の部品を absolute で配置する。 
SVG ほど難しいことをしない。
(追記2024) 現在だと flex の方が簡単かも？・・・。
左側のボックス
右側のボックス
続きのテキスト 
(2014/06-2024/03)

◎ ノート (2024)

・ある水準を超えるとツウもうなされる頭の痛い話になります・・・。

・現在では複雑な矢印や図形などは SVG の画像を用意した方が簡単です。
  CSS のサイズ指定や transform などによる変形・加工もしやすいです。

・また現在では Unicode の絵文字が大量に出現しているので、CSS の
  ::before や ::after などと組み合わせて利用する方法もあります。
inserted by FC2 system