HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

三角形の作成

説明

概要

CSS で三角形を作成する方法を説明します。

CSS で四角形や円形を作成するのに比べて三角形を作成するためには工夫が必要であり、以下の方法があります。

  • border プロパティの描画特性を利用して作成
  • aspect-ratio プロパティと clip-path プロパティを利用して作成

以前は、border プロパティを使用する方法が一般的でしたが、CSS の機能拡張により aspect-ratio プロパティと clip-path プロパティを利用する方法が一般的になっています。

【CSS Generators】

CSS Generators を使用することで希望の三角形を作成するの CSS を入手することができます。

このサイトでは、三角形だけでなく色々な形状の CSS も入手することができますので参考にしてください。

(1) border の描画特性を利用して作成

(a) border の描画特性の確認

border の線幅が細い場合は目立ちませんが線幅を太くすると縦線と横線が交わる部分は斜めに描画されることがわかります。下記の例では、描画特性をわかりやすくするために上下左右の border の色を変更しています。また、描画領域をわかりやすくするために描画領域の背景色をグレーを設定しています。

ソースコード表示(三角形の作成-01)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle1 {
	width: 100px;
	height: 100px;
	border-top: blue 25px solid;
	border-right: green 25px solid;
	border-bottom: yellow 25px solid;
	border-left: red 25px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle1"></div>
</div>

</body>
</html>

(b) コンテンツ領域をなしに設定

中心部のコンテンツ領域をなしに設定し、すべての領域を border に設定することで上下左右の border が三角形になります。

ソースコード表示(三角形の作成-02)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle2 {
	width: 100px;
	height: 100px;
	border-top: blue 50px solid;
	border-right: green 50px solid;
	border-bottom: yellow 50px solid;
	border-left: red 50px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle2"></div>
</div>

</body>
</html>
	

(c) 不要なボーダーの描画色を透明に設定

不要な border の描画色を transparent(透明)に設定します。下記の例では、上下と右の border を transparent に設定しています。

ソースコード表示(三角形の作成-03)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle3 {
	width: 100px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 50px solid;
	border-bottom: transparent 50px solid;
	border-left: red 50px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle3"></div>
</div>

</body>
</html>
	

(d) 三角形を領域全体に設定

三角形を領域全体にするには、左の border 幅を領域全体に設定し、右の border 幅を 0(ゼロ)に設定します。

ソースコード表示(三角形の作成-04)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle4 {
	width: 100px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 100px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle4"></div>
</div>

</body>
</html>
	

(e) 正三角形の作成

三角形を正三角形にするためには、領域の縦横比を 200 対 173 に設定します。

ソースコード表示(三角形の作成-05)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle5 {
	width: 86.5px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle5"></div>
</div>

</body>
</html>
	

(f) 三角形の角度を変更

三角形の角度を変更する場合は、transform: rotate(角度); を使用して三角を回転させます。下記の例では、時計方向に 45 度回転させています。回転によって三角形の辺が領域の外にはみ出してしまうことがあるので適時、位置調整を行います。

ソースコード表示(三角形の作成-06)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	padding: 25px 0 0 25px;
	border: #fff 1px solid;
}
.triangle6 {
	width: 86.5px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	transform: rotate(45deg);
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle6"></div>
</div>

</body>
</html>
	

(g) 文字列の前に三角形を作成

文字列の前に三角形を作成する場合は、before 擬似要素を使用して三角形を作成します。

ソースコード表示(三角形の作成-07)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle7 {
	width: 400px;
	padding: 0 0 0 100px;
	font-size: 4rem;
	position: relative;
}
.triangle7::before {
	content: "";
	display: block;
	width: 86.5px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle7">サンプル</div>
</div>

</body>
</html>
	

(h) 三角形を重ねて矢印を作成

応用編ですが、矢印を作成するには、before 疑似要素と after 疑似要素で、それぞれ三角形を作成して重ねます。

ソースコード表示(三角形の作成-08)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle8 {
	width: 486.5px;
	padding: 0 0 0 186.5px;
	font-size: 4rem;
	position: relative;
}
.triangle8::before {
	content: "";
	display: block;
	width: 86.5px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 86.5px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	box-sizing: border-box;
}
.triangle8::after {
	content: "";
	display: block;
	width: 173px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 173px solid;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle8">サンプル</div>
</div>

</body>
</html>
	

(2) aspect-ratio プロパティと clip-path プロパティを利用して作成

(a) 正三角形の作成

正三角形にするためには、aspect-ratio をで縦横比を 200 対 173 に設定します。

ソースコード表示(三角形の作成-11)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle11 {
	width: 86.5px;
	aspect-ratio: 86.5 / 100;
	clip-path: polygon(0 0,0 100%,100% 50%);
	background: red;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle11"></div>
</div>

</body>
</html>

(b) 三角形の角度を変更

三角形の角度を変更する場合は、transform: rotate(角度); を使用して三角を回転させます。下記の例では、時計方向に 45 度回転させています。回転によって三角形の辺が領域の外にはみ出してしまうことがあるので適時、位置調整を行います。

ソースコード表示(三角形の作成-12)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	padding: 25px 0 0 25px;
	border: #fff 1px solid;
}
.triangle11 {
	width: 86.5px;
	aspect-ratio: 86.5 / 100;
	clip-path: polygon(0 0,0 100%,100% 50%);
	background: red;
	transform: rotate(45deg);
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle11"></div>
</div>

</body>
</html>

(c) 文字列の前に三角形を作成

文字列の前に三角形を作成する場合は、before 擬似要素を使用して三角形を作成します。

ソースコード表示(三角形の作成-13)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle13 {
	width: 400px;
	padding: 0 0 0 100px;
	font-size: 4rem;
	position: relative;
}
.triangle13::before {
	content: "";
	display: block;
	width: 86.5px;
	position: absolute;
	top: 0px;
	left: 0px;
	aspect-ratio: 86.5 / 100;
	clip-path: polygon(0 0,0 100%,100% 50%);
	background: red;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle13">サンプル</div>
</div>

</body>
</html>

(d) 三角形のパスを変更して矢印を作成

応用編ですが、三角形のパスを変更して矢印を作成します。

ソースコード表示(三角形の作成-14)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle14 {
	width: 486.5px;
	padding: 0 0 0 186.5px;
	font-size: 4rem;
	position: relative;
}
.triangle14::before {
	content: "";
	display: block;
	width: 173px;
	position: absolute;
	top: 0px;
	left: 0px;
	aspect-ratio: 86.5 / 50;
	clip-path: polygon(0 0,0 100%,50% 75%,50% 100%,100% 50%,50% 0,50% 25%);
	background: red;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle14">サンプル</div>
</div>

</body>
</html>

(e) 矢印の形状を変更

矢印のパスを変更して矢印の形状を変更します。

ソースコード表示(三角形の作成-15)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三角形のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.triangle14 {
	width: 486.5px;
	padding: 0 0 0 186.5px;
	font-size: 4rem;
	position: relative;
}
.triangle14::before {
	content: "";
	display: block;
	width: 173px;
	position: absolute;
	top: 0px;
	left: 0px;
	aspect-ratio: 86.5 / 50;
	clip-path: polygon(0 0,10% 50%,0 100%,55% 75%,50% 100%,100% 50%,50% 0,55% 25%);
	background: red;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle14">サンプル</div>
</div>

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎