四角形の隅に三角マーク四角形の隅に三角マークが付いているWebデザインをたまに見かける。このようなデザインは昔は背景画像を書き出してCSSで表示させていたのだが現在ではCSSだけで実装できる。現在だとスマートフォンなどの解像度の高い画面で見られることが多いのでマーク部分がぼやけて表示されないようにするためにも画像で表現するのは控えたほうが良い。3つの実装方法CSSだけで四角形の隅に三角マークを付けるには3つのやり方がある。absoluteで配置する方法だ。簡単なやり方だがデメリットが多いためおすすめできない。その1CSSグラデーションを使用する三角マークはCSSグラデーションを使用することでも実装できる。IE9が推奨対象だった時代には使えなかったが現在はIE11以上が推奨されているため問題なく利用できる。その2しかもCSSグラデーションの場合は複数指定が容易で四方に指定することも可能だ。その3SVGを使用する最近だと三角マークをSVGで付ける方法も見かけるようになった。SVGだと形や色を自由に設定できるメリットがあるがSVGファイルの書き出しが必要になるというデメリットがある。Firefoxなどでは、この方法でSVGの背景を表示できない。以上により、現在CSSだけで四角形の隅に三角マークを追加したい場合はCSSグラデーションを使用するのが最適解となる。池尻大橋の人気ワンタン麺のラーメン屋に行った感想と注意点Confluence(コンフルエンス)を使用するなら最低限覚えておきたいWiki記法iwbjp7@gmail.com。