CSSシークレット ―47のテクニックでCSSを自在に操る

こうすると、表示は図4.32 のようになります。切り落とされた角と折

り返しの三角形がぴったり合っていますが、とても不自然に見えます。理

由はともかく、我々が見慣れてきた折り返しとは大きくかけ離れているこ

とが直感的にわかります。何が違うのかを探るために、実際の紙を用意し

て同じように折り返してみましょう。どうやっても、図4.32 のようには

見えないはずです。

図4.33 からもわかるように、実世界での折り返された三角形は我々の

表示と比べると反転しています。しかし背景は回転できないので、ここか

らは三角形を擬似要素として記述することにします。コードは以下のとお

りです。

上のコードは、単に図4.32 での折り返しの三角形を擬似要素に置き換

えただけのものです。次のステップとして、三角形の幅と高さを交換し、

切り落とされた部分の鏡像になるようにします。そしてこの三角形を反時

計方向に30° 回転（(90°‑30°)‑30°）し、斜辺を切り落とされた角と平行にし

ます。ここまでの擬似要素のコードは次のようになります。



.note{

 position:relative;

 background:#58a;/*代替表示*/

 background:

  linear‐gradient(‐150deg,

   transparent1.5em,#58a0);

}

.note::before{

 content:'';

 position:absolu