Skip to content

Instantly share code, notes, and snippets.

@naturallucky
Created April 27, 2019 23:01
Show Gist options
  • Save naturallucky/1aa6136ab619a4dd329ceb37fe3c57cb to your computer and use it in GitHub Desktop.
Save naturallucky/1aa6136ab619a4dd329ceb37fe3c57cb to your computer and use it in GitHub Desktop.
<style>
.block{
width:80pt;
height:60pt;
border:3pt solid #5d5;
border-radius:8%;
}
.r-arrow-out{
}
.r-arrow{
/*display:inline-block;
vertical-align:middle;*/
border-top:1pt solid #3c3;
width:30pt;
height:0pt;
position:relative;
margin:2pt;
}
.r-arrow::after{
content:"";
width: 5pt;
height:5pt;
position:absolute;
border-top:2pt solid #3c3;
border-right: 2pt solid #3c3;
transform:rotate(45deg);
right:0pt;top: -4pt;
}
</style>
<div style="display:flex;width:640pt;height:200pt;
justify-content: center;
align-items: center;">
<div class="block" style="">
AAAA
</div>
<div class="r-arrow"></div>
<div class="block">
BBB
</div>
<div class="r-arrow"></div>
<div class="block" style=";width:340pt;height:100pt;
padding:5pt;border:3pt dashed gray;">
CCC
<div style="display:flex;align-items: center;">
<div class="block">
xxxx
</div>
<div class="r-arrow"></div>
<div class="block">
yyy
</div>
<div class="r-arrow"></div>
<div class="block">
zzz
</div>
</div></div>
<div class="r-arrow"></div>
<div class="block" style="">
DDD
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment