平行四辺形 – css Parallelogram –

「平行四辺形」の描画。borderを使った例とbackgroundを使った例です。「Parallelogram」って知りませんでした･･･

borderを使った例（縦1）

html

<div class="parallelogram_up"></div>

css

.parallelogram_up {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	-webkit-transform: skewY(20deg);
	transform: skewY(20deg);
}

borderを使った例（縦2）

html

<div class="parallelogram_down"></div>

css

.parallelogram_down {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	-webkit-transform: skewY(-20deg);
	transform: skewY(-20deg);
}

borderを使った例（横1）

html

<div class="parallelogram_right"></div>

css

.parallelogram_right {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
}

borderを使った例（横2）

html

<div class="parallelogram_left"></div>

css

.parallelogram_left {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	-webkit-transform: skewX(20deg);
	transform: skewX(20deg);
}

backgroundを使った例（縦1）

html

<div class="parallelogram_g_up"></div>

css

.parallelogram_g_up {
	width: 100px;
	height: 100px;
	-webkit-transform: skewY(20deg);
	transform: skewY(20deg);
	background-image: linear-gradient(
		45deg,
		#2d424f 0%,
		#39a9d6 100%
	);
}

backgroundを使った例（縦2）

html

<div class="parallelogram_g_down"></div>

css

.parallelogram_g_down {
	width: 100px;
	height: 100px;
	-webkit-transform: skewY(-20deg);
	transform: skewY(-20deg);
	background-image: linear-gradient(
		45deg,
		#2d424f 0%,
		#39a9d6 100%
	);
}

backgroundを使った例（横1）

html

<div class="parallelogram_g_right"></div>

css

.parallelogram_g_right {
	width: 100px;
	height: 100px;
	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
	background-image: linear-gradient(
		45deg,
		#2d424f 0%,
		#39a9d6 100%
	);
}

backgroundを使った例（横2）

html

<div class="parallelogram_g_left"></div>

css

.parallelogram_g_left {
	width: 100px;
	height: 100px;
	-webkit-transform: skewX(20deg);
	transform: skewX(20deg);
	background-image: linear-gradient(
		45deg,
		#2d424f 0%,
		#39a9d6 100%
	);
}