CSSで○と×かいてみた

動機

CSSで図形が描けるのでは？と思ったけど意外と見つからなかった。（探し方がわるいのかもしれないけど。）
また、borderを使えばマルを描くのはそう難しくはないけれど、バツを描くには2つの要素が必要になってしまったりする。別にこれで困ることは（そんなに）無いとは思うけど、できれば1つの要素で完結したい。
というわけで、円形グラデーション（radial-gradient）とか線形グラデーション（linear-gradient）とかを使って描いてみる。svg使えば？というのは言わないお約束。

#描いてみる
結果はこんな感じ

背景色なんかはお好みで。

##バツ

background-image: 
  linear-gradient(-45deg, 
    transparent calc(50% - 1px), #fff calc(50% - 1px), 
    #fff calc(50% + 1px), transparent calc(50% + 1px)
  ), 
  linear-gradient(45deg, 
    transparent calc(50% - 1px), #fff calc(50% - 1px), 
    #fff calc(50% + 1px), transparent calc(50% + 1px)
  );

ひとつめのliner-gradientで-45度の線を描き、ふたつめのliner-gradientで45度の線を描くだけ。

マル

background-image: 
  radial-gradient(transparent 44%, #fff 47%, #fff 51%, transparent 55%);

透明にする開始地点（transparent XX%）と線を描く開始地点（#fff YY%）が近すぎるとChromeできれいに見えないので、少し離してあげるといいかんじ。