LPデザイン以外でもプレゼンテーション資料としてもよく使われている、ペンタゴン・アロー型のステップパターンを紹介します。
ソースコード
index.html
<div class='step'>
<ul class='pentagon'>
<li>
<div class='arrow'>Design</div>
<div class='text'>新しいアイデアをデザイン（設計）する。</div>
</li>
<li>
<div class='arrow'>Develop</div>
<div class='text'>デザインした設計どおりに、構築（開発）する。</div>
</li>
<li>
<div class='arrow'>Test</div>
<div class='text'>構築できたら、テスト（検証）する。</div>
</li>
<li>
<div class='arrow'>Release</div>
<div class='text'>問題が無いことが確認できたら、公開する。</div>
</li>
</ul>
</div>
pentagon.css
.step,
.step *,
.step *::before,
.step *::after{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
.step ul,
.step li{
list-style:none;
margin:0;
padding:0;
}
.step{
--size-width : 600px;
--size-height : 80px;
--size-arrow : 30px;
--size-gap : 10px;
--color-bg : #417a6e;
width : var(--size-width);
margin : 20px auto;
}
.step .pentagon{
display:flex;
gap:calc(var(--size-arrow) + var(--size-gap));
width:calc(100% - var(--size-arrow) * 2);
margin:0 auto;
}
.step .pentagon > *{
flex: 1;
}
.step .pentagon > * .arrow{
background-color: var(--color-bg);
position:relative;
height:var(--size-height);
color:white;
text-align:center;
padding:10px 0;
display:flex;
align-items:center;
justify-content:center;
}
.step .pentagon > * .arrow > *{
white-space:normal;
word-break:break-all;
}
.step .pentagon > *:first-child .arrow::before{
content:'';
position:absolute;
left:calc(var(--size-arrow) * -1);
top:0;
height:100%;
width:var(--size-arrow);
background-color:var(--color-bg);
}
.step .pentagon > *:not(:first-child) .arrow::before{
content:'';
position:absolute;
left:calc(var(--size-arrow) * -1);
top:0;
background-color:transparent;
z-index:-1;
width: 0px;
height: 0px;
border-style: solid;
border-width: calc(var(--size-height) / 2) var(--size-arrow) calc(var(--size-height) / 2) var(--size-arrow);
border-color: var(--color-bg) var(--color-bg) var(--color-bg) transparent;
}
.step .pentagon > * .arrow::after{
content:'';
position:absolute;
left:100%;
top:0;
background-color:transparent;
z-index:1;
width: 0px;
height: 0px;
border-style: solid;
border-width: calc(var(--size-height) / 2) var(--size-arrow) calc(var(--size-height) / 2) var(--size-arrow);
border-color: transparent transparent transparent var(--color-bg);
}
.step .pentagon > * .text{
display:flex;
gap:var(--size-gap);
width:calc(100% + var(--size-arrow) * 1.1);
margin-left:calc(var(--size-arrow) * -0.8);
padding:10px 0;
}
.step .pentagon > * .text > *{
padding:10px;
flex: 1;
}
@media (max-width:700px){
.step{
width:100%;
}
.step .pentagon{
flex-direction : column;
width: calc(100% - var(--size-arrow));
gap:var(--size-gap);
}
.step .pentagon > *{
width:100%;
}
.step .pentagon > * .arrow{
width:calc(100% - var(--size-arrow));
max-width:250px;
}
.step .pentagon > * .text{
width:calc(100% - var(--size-arrow));
margin:var(--size-gap) auto 0;
}
.step .pentagon > * .arrow::before{
content:none!important;
}
}
デモ
-
Design
新しいアイデアをデザイン（設計）する。
-
Develop
デザインした設計どおりに、構築（開発）する。
-
Test
構築できたら、テスト（検証）する。
-
Release
問題が無いことが確認できたら、公開する。
解説
5角形の矢印なので、
ペンタゴン・アロー・プロセスという名前なんですね。
レスポンシブの状態は、今回は縦並びにしているだけなんですが、高さを短くした方がデザイン的にいいかもしれませんね。
PC表示の時の矢印部分は、疑似要素のbeforeとafterを駆使して、三角形を書く技で対応しています。
ちょっとした技としては、こうしたプログレス表示の場合、それぞれの項目で横幅を統一するのがポイントなので、
flex:1;というのを、横並び項目につけています。
※これ、他の場合でも使えるので、知らなかった人は覚えておきましょう。
flex-grow:1;と言うふうに解説されている場合もありますが、flex:1;の方が扱いやすいでしょう。
githubでソース取得
https://github.com/yugeta/step_pattern
branch : 04_pentagon
$ git clone https://github.com/yugeta/step_pattern.git -b 04_pentagon
0 件のコメント:
コメントを投稿