CSSに関するメモ2

太さ1pxのボーダー（ボックスの幅：100px、高さ：20px）
太さ20pxのボーダー（ボックスの幅：100px、高さ：20px）
太さ20pxのボーダー（ボックスの幅と高さ：20px）
太さ20pxのボーダー（ボックスの幅と高さ：0px）
太さ20pxのボーダー（上のボーダー：なし）
太さ20pxのボーダー（左右のボーダー：透明）
太さ20pxのボーダー（左のボーダー：透明、右のボーダー：なし）

有効にするには、positionプロパティにrelativeやabsoluteを指定する。
デフォルトのstaticではz-indexプロパティが有効にならない。

noneを指定するとその要素がポインターに反応せず、背後の要素がポインターに反応する。

まず疑似要素::beforeを使ってボックスの下に逆三角形（ボックスのボーダーと同じ色）を付ける。
逆三角形は上記「３．borderプロパティ」を使って作る。



次に疑似要素::afterを使って逆三角形の一部を適宜隠す（ボックスの背景色と同じ色の逆三角形で先に付けた逆三角形を上書きする）。



但し、この方法では逆三角形の白い部分を透明にできない。