CSS - 十字型

HTMLとCSSで十字型（クロス）を作成するコード例です。

HTMLとCSSを使用して十字型（クロス型）を描画する方法のコード例です。

<div class="cross"></div>

長方形を作成した要素に疑似要素「before」を使ってもうひとつ長方形を作成、重ねる事で十字型を表現しています。

疑似要素は「position: absolute」で縦横中央に配置するために「top」「left」に「50%」を指定、「transform」プロパティで「translate(-50%, -50%)」を指定しています。

/* 十字型 */
.cross {
	position: relative;
	width: 60px;
	height: 250px;
	background: royalblue;
}

.cross::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 60px;
	background: royalblue;
}