CSS 十字・プラスの作り方

標準の十字

.cross {
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
  -webkit-clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}

太い十字

.cross-bold {
  clip-path: polygon(28% 0, 72% 0, 72% 28%, 100% 28%, 100% 72%, 72% 72%, 72% 100%, 28% 100%, 28% 72%, 0 72%, 0 28%, 28% 28%);
  -webkit-clip-path: polygon(28% 0, 72% 0, 72% 28%, 100% 28%, 100% 72%, 72% 72%, 72% 100%, 28% 100%, 28% 72%, 0 72%, 0 28%, 28% 28%);
}

ポイントと注意点

• 腕の太さ：35% / 65% の差で太さが決まります。差を広げると太く、狭めると細くなります。
• 左右対称に：要素を正方形にし、縦横の幅指定を同じにすると整ったプラスになります。
• 用途：背景色や背景画像を十字に切り抜けます。アイコンとして使うときはSVGの方が軽い場合もあります。微調整は clip-path ジェネレーター が便利です。

関連