画面上の表現を担うWebデザインの世界では、静止画ではなくCSS3コードによって直接菱形を描画する手法が一般化している。画像の読み込みオーバーヘッドを減らし、解像度に依存しないシャープな描画を実現するためだ。
代表的な記述方法は2つある。ひとつは、正方形のHTML要素に対して`transform: rotate(45deg);`を適用する方法。もうひとつは、`clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);`を用いて四角形の四頂点を切り抜く現代的なアプローチだ。後者は要素内のテキストを傾けずに済むため、レスポンシブWebデザインの現場で特に重宝されている。デバイスの画面幅に応じてサイズが伸縮しても、一切のボケを生じさせないスマートな実装が可能だ。
