CSS 三角 を利用したメニューを作る（レスポンシブ）

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。
なるべくレスポンシブ対応にしようと思います。

■ HTML

<div class="wrap">
<div class="yamenu-sp">

<div class="yamenu">
<p><span>1.朝起きる</span></p>
</div>

<div class="yamenu">
<p><span>2.歯を磨く</span></p>
</div>

<div class="yamenu">
<p><span>3.着替える</span></p>
</div>

</div>
</div>

メニューと言ってもaタグが入っていないので、リンクしたい場合は、pタグをaタグにすれば多分出来ると思います。

三角内側メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 10px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
    position: absolute;
	top: 30%;
	left: 90%;
}
.yamenu-sp div:first-child p:after{border-left: 20px solid #f00;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 20px solid #f66; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 20px solid #f99; }

矢印型メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }

五角形型 矢印メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	clip:rect(0px 500px 100px 0px);
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }