三角形2 – css triangle –

「三角形」の描画。borderを使った例とbackgroundを使った例です。

borderを使った例（左上）

html

<div class="triangle_left_up"></div>

css

.triangle_left_up {
	width: 0;
	height: 0;
	border-top: 100px solid #39a9d6;
	border-right: 100px solid transparent;
}

borderを使った例（右上）

html

<div class="triangle_right_up"></div>

css

.triangle_right_up {
	width: 0;
	height: 0;
	border-top: 100px solid #39a9d6;
	border-left: 100px solid transparent;
}

borderを使った例（右下）

html

<div class="triangle_right_down"></div>

css

.triangle_right_down {
	width: 0;
	height: 0;
	border-bottom: 100px solid #39a9d6;
	border-left: 100px solid transparent;
}

borderを使った例（左下）

html

<div class="triangle_left_down"></div>

css

.triangle_left_down {
	width: 0;
	height: 0;
	border-bottom: 100px solid #39a9d6;
	border-right: 100px solid transparent;
}

backgroundを使った例（左上）

html

<div class="triangle_g_left_up"></div>

css

.triangle_g_left_up {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(
		135deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
}

backgroundを使った例（右上）

html

<div class="triangle_g_right_up"></div>

css

.triangle_g_right_up {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(
		-135deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
}

backgroundを使った例（右下）

html

<div class="triangle_g_right_down"></div>

css

.triangle_g_right_down {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(
		-45deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
}

backgroundを使った例（左下）

html

<div class="triangle_g_left_down"></div>

css

.triangle_g_left_down {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(
		45deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
}