Skip to content

Instantly share code, notes, and snippets.

@tsq

tsq/flow-chart.html

Created August 21, 2015 09:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsq/2adc9d86148454f11cef to your computer and use it in GitHub Desktop.
Save tsq/2adc9d86148454f11cef to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flow-chart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 990px;
margin: 0 auto;
}
.row {
overflow: hidden;
}
.col {
padding: 20px 0;
float: left;
width: 165px;
height: 120px;
overflow: hidden;
}
.col .rect {
width: 110px;
height: 100%;
background-color: #27A837;
float: left;
text-align: center;
line-height: 80px;
font-size: 16px;
color: #fff;
}
.col .line {
float: left;
background-color: #27A837;
margin: 35px 0;
width: 45px;
height: 10px;
}
.col .arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
float: left;
border-left: 10px solid #27A837;
margin: 30px 0;
}
.col .arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
float: left;
border-right: 10px solid #27A837;
margin: 30px 0;
}
.col.down-last {
float: right;
}
.col .line-down {
margin-left: 50px;
background: #27A837;
width: 10px;
height: 90px;
}
.col .arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
float: left;
border-top: 10px solid #27A837;
margin-left: 44px;
}
a {
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="rect">
<span>商家中心</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>新签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>自签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>续签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>退签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>B2C</span>
</div>
<!--<div class="line"></div>-->
<!--<div class="arrow-right"></div>-->
</div>
</div>
<div class="row">
<div class="col down-last">
<div class="line-down"></div>
<div class="arrow-down"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="rect">
<span>商家中心</span>
</div>
<div class="arrow-left"></div>
<div class="line"></div>
</div>
<div class="col">
<div class="rect">
<span>新签</span>
</div>
<div class="arrow-left"></div>
<div class="line"></div>
</div>
<div class="col">
<div class="rect">
<span>自签</span>
</div>
<div class="arrow-left"></div>
<div class="line"></div>
</div>
<div class="col">
<div class="rect">
<span>续签</span>
</div>
<div class="arrow-left"></div>
<div class="line"></div>
</div>
<div class="col">
<div class="rect">
<span>退签</span>
</div>
<div class="arrow-left"></div>
<div class="line"></div>
</div>
<div class="col">
<div class="rect">
<span>B2C</span>
</div>
</div>
</div>
<div class="row">
<div class="col down-first">
<div class="line-down"></div>
<div class="arrow-down"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="rect">
<span>商家中心</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>新签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>自签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>续签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span>退签</span>
</div>
<div class="line"></div>
<div class="arrow-right"></div>
</div>
<div class="col">
<div class="rect">
<span><a href="#">B2C</a></span>
</div>
<!--<div class="line"></div>-->
<!--<div class="arrow-right"></div>-->
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment