Flow

Flow Div

by pphheerroonn

HTML

<style><!--
.flow a{text-decoration: none;color:#333333;}
.flow > * {background:#ed1c24; width: 500px; height: 100px; position: relative; padding:15px; padding-top:30px; box-sizing: border-box; text-align:center; font-size:2em;}


.flow div:nth-child(1){border-radius:25px 25px 0px 0px;}
.flow div:nth-child(odd)::after{  
    content: '';
    position: absolute;clear:both;
    left: 20%;
    top: 99%;
    width: 0;
    height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ed1c24;z-index: 1;}
  
 .flow div:nth-child(even){background:#f2f2f2; color:#333333}
.flow div:nth-child(even)::after {  
    content: '';
    position: absolute;clear:both;
    left: 80%;
    top: 99%;
    width: 0;
    height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #f2f2f2;z-index: 1;}
  .flow div:nth-last-child(1){border-radius: 0px 0px 25px 25px;}
  .flow div:nth-last-child(1)::after {border: 0px;}
--></style>
<div class="flow">
<div><a href="/education/customer/account/create/"> create account</a></div>
<div><a href="/education/customer/account/create/"> create account</a></div>
<div><a href="/education/customer/account/create/"> create account</a></div>
<div><a href="/education/customer/account/create/"> create account</a></div>
</div>