bnhds

bnhds.markdown

bnhds

A Pen by Dil on CodePen.

License.

index.html

<div class="flowchart">
  
  <div class="question">
    <p>Do I set trends?</p>
  </div>
  
  <div class="answers">
    <div class="answer">
      <header class="hd yes">Yes</header>
      <section class="bd">
        <p>Of course you do. Your the <b>man</b> with the plan.</p>
      </section>
    </div>
    
    <div class="answer">
      <header class="hd no">No</header>
      <section class="bd">
        <p>You've got bad taste</p>
      </section>
    </div>
  </div>
  
</div>

style.less

*,*:after{}

body{
  background: #eee;
}

.flowchart{
  text-align: center;
  //background: yellow;
  //width:40em;
}


.question{
  position: relative;
  width:50%;
  background: green;
  color: #fff;
  margin: 0 auto;
  margin-bottom:2em;
  
  
  p{
    padding:0.5em;
  }
  
  &:before{
    position:absolute;
    content:"";
    height:1em;
    width:1px;
    background: #ccc;
    bottom: -1em;
    left:50%;
    //margin-left:-1px;
  }

  &:after{
    position:absolute;
    content:"";
    height:1px;
    width:100%;
    background: #ccc;
    bottom: -1em;
    left:50%;
    margin-left:-50%;
  }  
  
  
  
}
  
.answers{}

.answer{
  position: relative;
  width:50%;
  float:left;
  margin-top:-1px;
  //background: lightblue;
  
  &:before{
    position:absolute;
    content:"";
    height:1em;
    width:1px;
    background: #ccc;
    top: -1em;
    left:50%;
    margin-left:-1px;
    
  }  
  
  
  &:last-child{
    
    .bd{
      margin-left:2%;
    }
    
  }
  
  .hd{
    //border: 1px solid red;
    background: #fff;
    width:6em;
    margin:0 auto -0.5em;
    padding:0.5em 1em;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;

    &:before{

      position: absolute;  
      left:0;
      bottom:-1em;
      margin-bottom:-1px;
      content:"";
			border:0.5em solid transparent;
			border-top-color:#ccc;
      border-top-color:rgba(0,0,0,0.2);
      border-left-width: 4em;
			border-right-width: 4em;
    }
    
    &:after{

      position: absolute;  
      left:0;
      bottom:-1em;
      content:"";
			border:0.5em solid transparent;
			border-top-color:#fff;
      border-left-width: 4em;
			border-right-width: 4em;
    }

    &.yes{
      color: green;
    }
    
    &.no{
      color: red;
    }
    
  }
  
  .bd{
    
    background: #ffffff;
    width:98%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    //min-height: 4em;
    
    p{
      padding:2em 1em;
      margin: 0;
      min-height:2.5em;
    }
    
    b{
      font-weight:600;
      color: orange;
    }
  
  }
  
}