<div class="frame">
<div class="center">
<div class="number">
<div class="one-one"></div>
<div class="one-two"></div>
<div class="zero-one"></div>
<div class="zero-two"></div>
</div>
<span class="big">Days</span>
<span class="small">CSS Challenge</span>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
background: #43389F;
background: -webkit-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
background: -moz-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
background: -o-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
background: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43389F', endColorstr='#4ec6ca',GradientType=1 );
font-family: 'Open Sans', sans-serif;
color: #fff;
}
.center {
position: absolute;
top: 50.8%;
left: 50.5%;
transform: translate(-50%,-50%);
}
.number {
position: relative;
height: 100px;
width: 200px;
.one-one {
position: absolute;
z-index: 1;
top: 0;
left: -16px;
height: 40px;
width: 20px;
background: #fff;
border-radius: 3px;
transform: rotate(50deg);
box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
}
.one-two {
position: absolute;
z-index: 10;
top: 0;
left: 0px;
height: 100px;
width: 24px;
background: #fff;
border-radius: 3px;
box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
}
.zero-one,
.zero-two {
position: absolute;
z-index: 8;
top: 0;
left: 17px;
box-sizing: border-box;
height: 100px;
width: 100px;
border-radius: 50%;
border: 24px solid #fff;
box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
}
.zero-two {
z-index: 6;
left: 100px;
}
}
.big {
position: relative;
z-index: 20;
display: block;
text-align: center;
font-size: 81px;
line-height: 65px;
text-transform: uppercase;
font-weight: 700;
margin-left: -8px;
}
.small {
position: relative;
z-index: 20;
display: block;
text-align: center;
font-size: 26px;
line-height: 30px;
text-transform: uppercase;
font-weight: 300;
margin-left: -4px;
}
Also see: Tab Triggers