CSSで背景に〇✕

背景に◯×を入れるという案件がございました。
「良いですよ」という内容の文章の背景に◯を表示し、「良くないですよ」という内容の文章の背景に×を入れるというものでございました。

やり方はいろいろあると思います。画像やSVGで背景に入れてもいいですし、CSSで整形したものを重ねても良いでしょう。
今回はCSSのグラデーションを使って実現する方法を選択いたしました。特に理由はないのですが、昨今ブラウザの対応が進んでますので、そろそろ「radial-gradient」も使って良いと判断したのとSVGで作るほど複雑なものでもないかなと思い、今回はCSSグラデーションを使っての制作となりました。

以下が実際のHTML、CSSになります。

See the Pen CSSで背景に○× by yoshiaki nakao (@woopeer) on CodePen.

◯は結構単純で外側から30px部分だけグラデーションでカラーを入れて、それより内側は透明にすれば完成です。

×は多少テクニックが必要で、まず斜め45度と－45度の帯をクロスさせるのですが、普通にやってもうまくいきません。
センターでちょうどクロスさせるには、50%を基準に－15pxと＋15pxで帯をグラデーションさせることで30pxの帯をセンターでクロスさせることができます。（作りたい帯の幅を半分にして＋－させてセンターにしている。）
ただ、これだけですとボックスの端まで帯が続いてしまうので×に見えません。
これを解決するために、外側にボックスと同じ背景のカラー（例では白）の円でマスクする形のグラデーションを重ねています。
ですので×の端っこは実は円です。でも幅30px程度の厚みでは見た目上、円に見えないというのが今回のポイントです。

×に関しておさらいすると
①円グラデーション「中心から99.9%透明→100%背景カラー」
②斜め45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」
③斜めー45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」
の４つのグラデーションを重ねて×を実現させています。ちなみに①のみ一番最初（一番上の重なり）にしないとうまく表示できませんのでご注意ください。