CodePen Embed - Material Card: Pure CSS Diagram

<div class="card" id="card-visitors">
   <input type="checkbox" id="card-visitors-indicator" />
   <div class="header">
      <label class="indicator" for="card-visitors-indicator">
         <svg class="open" width="18" height="27">
            <line x1="1.5" y1="12" x2="2" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
            <line x1="9" y1="7" x2="9" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
            <line x1="16.5" y1="2" x2="16.5" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
         </svg>
         <svg class="close" width="15" height="25">
            <line x1="1.5" y1="13.5" x2="15" y2="0" style="stroke: #FFFFFF; stroke-width: 3" />
            <line x1="1.5" y1="11.5" x2="15" y2="25" style="stroke: #FFFFFF; stroke-width: 3" />
         </svg>
      </label>
      <div class="content">
         <div class="data">
            <div class="top">
               <p class="title">Visitors</p>
               <p class="date">01 Sep 2016 - 15 Sep 2016</p>
            </div>
            <div class="graph">
               <div class="horizontal">
                  <div>
                     <hr>
                     <p>200</p>
                  </div>
                  <div>
                     <hr>
                  </div>
                  <div>
                     <hr>
                     <p>100</p>
                  </div>
                  <div>
                     <hr>
                  </div>
                  <div>
                     <hr>
                     <p>0</p>
                  </div>
               </div>
               <div class="vertical">
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 12%"></div>
                     </div>
                     <p>01</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 19%"></div>
                     </div>
                     <p class="hidden">02</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 8%"></div>
                     </div>
                     <p>03</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 15%"></div>
                     </div>
                     <p class="hidden">04</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 28%"></div>
                     </div>
                     <p>05</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 45%"></div>
                     </div>
                     <p class="hidden">06</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 61%"></div>
                     </div>
                     <p>07</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 46%"></div>
                     </div>
                     <p class="hidden">08</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 39%"></div>
                     </div>
                     <p>09</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 52%"></div>
                     </div>
                     <p class="hidden">10</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 32%"></div>
                     </div>
                     <p>11</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 9.5%"></div>
                     </div>
                     <p class="hidden">12</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 41%"></div>
                     </div>
                     <p>13</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 79%"></div>
                     </div>
                     <p class="hidden">14</p>
                  </div>
                  <div class="day">
                     <div class="line-container">
                        <div class="line" style="height: 15%"></div>
                     </div>
                     <p>15</p>
                  </div>
               </div>
            </div>
         </div>
         <p class="title">Today</p>
         <p class="date">15 Sep 2016</p>
         <div class="float"></div>
      </div>
   </div>
   <div class="info">
      <p>Total Visitors of the<br>Public Website</p>
      <p class="counter">30<span class="unit"> VIS</span></p>
   </div>
</div>

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin-ext';

* {
  z-index: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #212121;
  background-color: #212121;
}

.indicator {
  cursor: pointer;
}

.card {
  background-color: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 5px;
}

.card#card-visitors {
  position: relative;
  width: 300px;
  height: 400px;
  margin: calc((100vh - 400px) / 2) auto;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator {
  display: none;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator {
  top: 30%;
  right: calc(50% - 25px);
  margin: calc(-30% - 25px) calc(50% - 25px) 0 0;
  background-color: transparent;
  -webkit-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -moz-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -o-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -ms-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator .open {
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  -moz-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  -o-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  -ms-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator .close {
  transform: scale(1);
  -webkit-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -moz-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -o-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -ms-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .data {
  opacity: 1;
  -webkit-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
  -moz-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
  -o-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
  -ms-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
  transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .data .graph .vertical .day .line-container {
  max-height: 80%;
  -webkit-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -moz-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -o-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  -ms-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
  transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}

.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .float {
  opacity: 1;
  transform: scale(10);
  -webkit-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -moz-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -o-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -ms-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
}

.card#card-visitors .header {
  width: 100%;
  height: 60%;
  background-color: #E91E63;
}

.card#card-visitors .header label.indicator {
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  top: calc(60% - 25px);
  right: 20px;
  margin: 0;
  border-radius: 100%;
  background-color: #FF9800;
  -webkit-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -moz-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -o-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  -ms-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
  transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
}

.card#card-visitors .header label.indicator .open {
  position: absolute;
  margin: 11.5px 16px;
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
  -moz-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
  -o-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
  -ms-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
}

.card#card-visitors .header label.indicator .close {
  margin: 12.5px 17.5px;
  transform: scale(0);
  -webkit-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -moz-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -o-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -ms-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

.card#card-visitors .header .content {
  position: relative;
  width: 100%;
  height: 100%;
}

.card#card-visitors .header .content > * {
  color: #FFFFFF;
  font-weight: 500;
}

.card#card-visitors .header .content .data {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #FF9800;
  -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -moz-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -o-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -ms-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

.card#card-visitors .header .content .data .top {
  width: 100%;
  height: 40%;
}

.card#card-visitors .header .content .data .top .title {
  width: 100%;
}

.card#card-visitors .header .content .data .graph {
  position: relative;
  width: calc(100% - 40px);
  height: 60%;
  margin: 0 20px 20px 20px;
}

.card#card-visitors .header .content .data .graph .horizontal {
  width: 100%;
  height: 100%;
}

.card#card-visitors .header .content .data .graph .horizontal div {
  height: 20%;
}

.card#card-visitors .header .content .data .graph .horizontal div hr {
  border: 1px solid #FFFFFF;
  opacity: .25;
}

.card#card-visitors .header .content .data .graph .horizontal div p {
  margin-top: 1px;
  opacity: .7;
  font-size: 13px;
}

.card#card-visitors .header .content .data .graph .vertical {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  position: absolute;
  width: 90%;
  height: 100%;
  top: 0;
  margin-left: 10%;
}

.card#card-visitors .header .content .data .graph .vertical .day {
  position: relative;
  width: calc(100% / 14);
  height: 100%;
}

.card#card-visitors .header .content .data .graph .vertical .day .line-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  width: 2px;
  height: 80%;
  max-height: 0;
  bottom: 20%;
  margin: 0 calc((100% - 2px) / 2);
  -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -moz-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -o-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -ms-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

.card#card-visitors .header .content .data .graph .vertical .day .line-container .line {
  width: 100%;
  background-color: #FFFFFF;
}

.card#card-visitors .header .content .data .graph .vertical .day p {
  position: absolute;
  height: 20%;
  bottom: 0;
  margin-bottom: -3px;
  opacity: .7;
  font-size: 13px;
}

.card#card-visitors .header .content .data .graph .vertical .day .hidden {
  opacity: 0;
}

.card#card-visitors .header .content .title {
  margin-top: 15px;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
}

.card#card-visitors .header .content .date {
  width: 100%;
  opacity: .7;
  text-align: center;
}

.card#card-visitors .header .content .float {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  right: calc(50% - 25px);
  opacity: 0;
  border-radius: 100%;
  background-color: #FF9800;
  -webkit-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -moz-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -o-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  -ms-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

.card#card-visitors .info {
  width: calc(100% - 40px);
  height: calc(40% - 80px);
  padding: 40px 20px;
  color: #9E9E9E;
}

.card#card-visitors .info .counter {
  margin-top: 8px;
  color: #212121;
  font-size: 45px;
  font-weight: 400;
  line-height: 40px;
}

.card#card-visitors .info .counter .unit {
  font-size: 15px;
}

/* click on the orange circle to show up the diagrammatic overview */

// Design concept by Kingyo: https://bit.ly/2caqNDZ

This Pen is owned by Befeepilf on CodePen.

See more by @Befeepilf on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.