三角形 – css triangle –

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

borderを使った例（上）

html

<div class="triangle_up"></div>

css

.triangle_up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 90px solid #39a9d6;
}

borderを使った例（右）

html

<div class="triangle_right"></div>

css

.triangle_right {
	width: 0;
	height: 0;
	border-left: 90px solid #39a9d6;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

borderを使った例（下）

html

<div class="triangle_down"></div>

css

.triangle_down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 90px solid #39a9d6;
}

borderを使った例（左）

html

<div class="triangle_left"></div>

css

.triangle_left {
	width: 0;
	height: 0;
	border-right: 90px solid #39a9d6;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

backgroundを使った例（上）

html

<div class="triangle_g_up"></div>

css

.triangle_g_up {
	width: 100px;
	height: 80px;
	background-image: linear-gradient(
		40deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
	transform: skewX(-30deg);
}

backgroundを使った例（右）

html

<div class="triangle_g_right"></div>

css

.triangle_g_right {
	width: 80px;
	height: 100px;
	background-image: linear-gradient(
		50deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
	transform: skewX(-30deg);
}

backgroundを使った例（下）

html

<div class="triangle_g_down"></div>

css

.triangle_g_down {
	width: 100px;
	height: 80px;
	background-image: linear-gradient(
		140deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
	transform: skewX(30deg);
}

backgroundを使った例（左）

html

<div class="triangle_g_left"></div>

css

.triangle_g_left {
	width: 80px;
	height: 100px;
	background-image: linear-gradient(
		-50deg,
		#2d424f 0%,
		#39a9d6 50%,
		transparent 50%,
		transparent 100%
	);
	transform: skewX(30deg);
}