stat widget dog ear style

index.html

<h1>Default styled stat box</h1>
<div class="stat yellowmu" style="height: 234px; max-width: 300px;">
  <p class="number">94.8%</p>
  <p>NCLEX-R.N. first time pass rate for b.s.n. students. <a href="#">Link</a></p>
  <a class="button" href="http://www.in.gov/pla/3564.htm" target="_blank">Learn More</a>
</div>

<h1>yellow style stat box</h1>
<div class="stat yellow" style="height: 234px; max-width: 300px;">
  <p class="number">94.8%</p>
  <p>NCLEX-R.N. first time pass rate for b.s.n. students. <a href="#">Link</a></p>
  <a class="button" href="http://www.in.gov/pla/3564.htm" target="_blank">Learn More</a>
</div>

scripts

<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/jquery.min.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/foundation.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/owl-carousel/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/app.js"></script>

stat-widget-dog-ear-style.markdown

stat widget dog ear style

A Pen by ed ventura on CodePen.

License.

style.css

/*css for stats*/

.stat {
  background: none;
  text-align: center;
  padding: 1.25rem;
  border: none;
  overflow: hidden;
  position: relative;
  -webkit-clip-path: polygon(100% 0, 100% 84%, 88% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 84%, 88% 100%, 0 100%, 0 0);
}

.stat::before {
  content: '';
  position: absolute;
  top: auto;
  left: auto;
  bottom: -10px;
  right: -10px;
  background: #464646;
  width: 1000px;
  height: 1000px;
}

.stat >::first-child {
  margin-top: 0;
}

.stat >::last-child {
  margin-bottom: 0;
}

.stat p {
  font-weight: normal;
  color: white;
  font-size: 1.1rem;
  text-transform: uppercase;
  position: relative;
}

.stat .number {
  font-family: 'source sans pro';
  font-weight: normal;
  font-size: 3.420rem;
  color: white;
  margin-bottom: 0;
}

.stat a {
  color: white;
  text-decoration: underline;
}

.stat a.button {
  background: transparent;
  border-color: #fff;
  color: #fff;
  width: auto;
  position: relative;
}

.stat a.button:hover,
.stat a.button:focus {
  background: #222;
  color: #fff;
}

style.scss

.stat {
  &.yellow {
    .number {color:#031e51;}
    a:link, a:visited {color:#031e51; text-transform:none;}
    .button:hover {color:#ffffff;}
    &:before {background:#ffc107;}
  }
}

styles

<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/css/foundation.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.carousel.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/css/app.css" rel="stylesheet" />