cssのみで三角形・矢印やリボンを表現する最新の方法、レスポンシブにも対応！

linear-gradientを使った三角形の作り方

今回、三角形をつくるのにcssでグラデーション作成する際にもつかわれるlinear-gradientを使います。
ポイントは、linear-gradientは斜め方向にグラデーションを掛けることも可能だということです。
簡単なサンプルを作ってみます。

html

<div class="box1"></div>

css

.box1{
	width:50px;
	height:50px;
	background:linear-gradient(to bottom left, transparent 50%, #f8676a 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #f8676a 50%) bottom left / 100% 50% no-repeat;
}

結果

解説
これは、.box1の背景を三角で表現した例になります。
backgroundが「,」で区切られて２パートに分かれていますが、三角形が２つ組み合わさって1つの三角形を形成している形になります。
background-sizeが100% 50%で表現されていることからわかる通り、上50％、下50％でパート分けされています。
linear-gradientで三角形を表現していますが、支点から50％までを透明（transparent）で表現しているので、画像にかぶせて使っても透明部分は確保されます。

わかりやすくパート分けしてみます

linear-gradientを色分してどの部分がどう構成されているか観察してみます。

.box1{
	background-size:
	width:50px;
	height:50px;
	background:linear-gradient(to bottom left, #f00 50%, #0f0 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, #FF0 50%, #00f 50%) bottom left / 100% 50% no-repeat;
}

結果

解説
上半分が、to bottom leftなので左下に向かて赤→緑に変化
下半分が、to top leftなので左上に向かって黄→青に変化

こうしてみるとわかりやすいですね！
この構造自体を理解できているといろいろ応用がきくのでとっても便利です。

linear-gradientの三角形を使った応用術

タイトルなどに使われるリボンを表現する

linear-gradientで三角形を作る方法を使えばリボン付きの帯なども簡単に作れます。
html

<p><span class="ribon">ダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

css

p{
	text-align:center;
}
.ribon{
	display:inline-block;
	padding:10px;
	background:#fdeff2;
	position:relative;
	margin:0 20px;
	text-align:left;
}
.ribon:before{
	content:"";
	width:20px;
	height:100%;
	left:-20px;
	top:0;
	position:absolute;
	background:linear-gradient(to bottom left, #fdeff2 50%, transparent 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, #fdeff2 50%, transparent 50%) bottom left / 100% 50% no-repeat;
}
.ribon:after{
	content:"";
	width:20px;
	height:100%;
	right:-20px;
	top:0;
	position:absolute;
	background:linear-gradient(to bottom right, #fdeff2 50%, transparent 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, #fdeff2 50%, transparent 50%) bottom left / 100% 50% no-repeat;
}

結果

ダミーテキストダミーテキストダミーテキストダミーテキスト

上下に別れた3角形の配置を変えることでリボンのような形を表現することができました。
「ダミーテキスト」が折り返してもリボンの高さが可変しデザインが維持されます。

矢印三角を写真にかぶせてみた

画像の上に矢印が被るようなデザインもlinear-gradientの三角形なら簡単にできます。

linear-gradientの三角形だからできる！矢印三角にボーダーつけてみた

html

<div class="boxbd">
<div class="a"></div>
<div class="b"><div>
</div>

css

.boxbd{
	width:50px;
}
.boxbd .a{
	height:50px;
	background:#f00;
	border:2px solid #000;
	border-bottom:none;
	position:relative;
}
.boxbd .a:before{
	content:"";
	width:calc(100% + 4px);
	height:20px;
	position:absolute;
	bottom:-20px;
	left:-2px;
	background:linear-gradient(to top right, transparent 50%,#000 50%, #f00 calc(50% + 2px)) top left/ 50% 100% no-repeat,
	linear-gradient(to top left, transparent 50%,#000 50%, #f00 calc(50% + 2px)) top right / 50% 100% no-repeat;
}
.boxbd .b{
	height:50px;
	background:#FF0;
	border:2px solid #000;
	border-top:none;
}

結果

ちょっと微妙な感じではありますが、上記のように矢印三角形部分にボーダーをつけることができました。

コピペでOK！三角形の基

まとめとして、ここに上下左右のcssを記述しておきたいと思います。
これをコピーしてcssに適応するだけど簡単に三角形を表現できます。

<div class="box"></div>

三角右向き

.box{
    background:linear-gradient(to bottom left, transparent 50%, #f8676a 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #f8676a 50%) bottom left / 100% 50% no-repeat;
}

結果

三角左向き

.box{
    background:linear-gradient(to bottom right, transparent 50%, #f8676a 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #f8676a 50%) bottom left / 100% 50% no-repeat;
}

結果

三角上向き

.box{
    background:linear-gradient(to top left, #f8676a 50%, transparent 50%) top left/ 50% 100% no-repeat,
    linear-gradient(to top right, #f8676a 50%, transparent 50%) top right / 50% 100% no-repeat;
}

結果

三角下向き

.box{
    background:linear-gradient(to bottom left, #f8676a 50%, transparent 50%) top left/ 50% 100% no-repeat,
    linear-gradient(to bottom right, #f8676a 50%, transparent 50%) top right / 50% 100% no-repeat;
}

結果