四角形 – css Square –

「四角形」の描画。基本何もしておりませんが、borderの使い方で色々と出来そうです。

html

<div class="square"></div>

css

.square {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
}

border

html

<div class="square_border"></div>

css

.square_border {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	border: 5px solid #2d424f;
}

個別に設定

html

<div class="square_triangle"></div>

css

.square_triangle {
	width: 0;
	height: 0;
	border-top: 50px solid #59bde0;
	border-right: 50px solid #39a9d6;
	border-bottom: 50px solid #2d424f;
	border-left: 50px solid #2d8fb5;
}

個別に設定2

html

<div class="square_triangle2"></div>

css

.square_triangle2 {
	width: 40px;
	height: 40px;
	background-color: #dce0e0;
	border-top: 50px solid #59bde0;
	border-right: 50px solid #39a9d6;
	border-bottom: 50px solid #2d424f;
	border-left: 50px solid #2d8fb5;
}

サンプル1

html

<div class="square_1"></div>

css

.square_1 {
	width: 40px;
	height: 40px;
	border-top: 50px solid #59bde0;
	border-right: 50px solid #39a9d6;
}

サンプル2

html

<div class="square_2"></div>

css

.square_2 {
	width: 100px;
	height: 100px;
	border-top: 50px solid #59bde0;
	border-right: 50px solid #39a9d6;
	border-radius: 10px;
	transform: rotate(45deg);
}