CSS div with double border PLUS triange at bottom - html

Question

I'm trying to achieve this (triangle at the bottom) in CSS and I'm starting to think it's not possible.
Update: got it working - but I do hope there is a better way:
Layering 4 CSS triangles ontop of eachother using :before :after
Code: http://jsfiddle.net/dtbaker/5fhL1odg/1/
The closest I was able to get is this (using a combination of css triangles that overlap eachother).
Code so far:
http://jsfiddle.net/dtbaker/gk47ggc1/1/
<div class="blog">
<div class="blog_date">
<span class="month">Sep</span>
<span class="day">30th</span>
<span class="year">2014</span>
<div></div>
</div>
</div>
div.blog .blog_date {
z-index: 10;
top: 10px;
left: 11px;
position: absolute;
width:56px;
float:right;
text-align:center;
color:#4b443a;
background: #f8f4e9;
border-top: 2px solid #edebdf;
border-left: 2px solid #edebdf;
border-right: 2px solid #edebdf;
}
div.blog .blog_date:before {
content: '';
position: absolute;
top:-5px;
right:-5px;
left:-5px;
bottom:-5px;
border-top:1px solid #e8e6da;
border-left:1px solid #e8e6da;
border-right:1px solid #e8e6da;
}
div.blog .blog_date div{
width: 0;
height: 0;
border-style: solid;
border-width: 12px 33px 0 33px;
border-color: #e8e6da transparent transparent transparent;
position: absolute;
bottom: -16px;
z-index: 5;
left:-5px;
}
div.blog .blog_date div:before {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 30px 0 30px;
border-color: #FFF transparent transparent transparent;
position: absolute;
top: -11px;
content: '';
left: -30px;
z-index: 3;
}
div.blog .blog_date div:after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 30px 0 30px;
border-color: #f8f4e9 transparent transparent transparent;
position: absolute;
top: -15px;
content: '';
left: -30px;
z-index: 4;
}
div.blog .blog_date span {
display:block;
width:100%;
}
div.blog .blog_date span.month {
font-size:13px;
height:16px;
margin-top:5px;
}
div.blog .blog_date span.day {
font-size:18px;
height:20px;
color:#c9a976;
}
div.blog .blog_date span.year {
font-size:13px;
height:16px;
}
It would be very easy via an image, but if some wiz out there can figure this out I would be very grateful.
Thanks!

Answer 1

I haven't tried it but maybe you can draw the line to form the border of the triangle and play with rotations? Probably won't work on every browser though.
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

Answer 2

Update: got it working - but I do hope there is a better way:
Layering 4 CSS triangles ontop of eachother using :before :after
Code: http://jsfiddle.net/dtbaker/5fhL1odg/1/
div.blog .blog_date {
z-index: 10;
left: 11px;
position: absolute;
width:56px;
float:right;
text-align:center;
color:#4b443a;
background: #f8f4e9;
border-top: 2px solid #edebdf;
border-left: 2px solid #edebdf;
border-right: 2px solid #edebdf;
}
div.blog .blog_date:before {
content: '';
position: absolute;
top:-5px;
right:-5px;
left:-5px;
bottom:-2px;
border-top:1px solid #e8e6da;
border-left:1px solid #e8e6da;
border-right:1px solid #e8e6da;
}
div.blog .blog_date:after {
/* 1px outer border */
width: 0;
height: 0;
border-style: solid;
border-width: 12px 33px 0 33px;
border-color: #e8e6da transparent transparent transparent;
position: absolute;
bottom: -14px;
z-index: 2;
left:-5px;
content: '';
}
div.blog .blog_date div{
/* white separator/overlay */
width: 0;
height: 0;
border-style: solid;
border-width: 12px 33px 0 33px;
border-color: #FFF transparent transparent transparent;
position: absolute;
content: '';
z-index: 4;
bottom: -13px;
left: -5px;
}
div.blog .blog_date div:before {
/* 2px inner border */
width: 0;
height: 0;
border-style: solid;
border-width: 11px 30px 0 30px;
border-color: #edebdf transparent transparent transparent;
position: absolute;
content: '';
z-index: 3;
top: -13px;
left: -30px;
}
div.blog .blog_date div:after {
/* inner triangle */
width: 0;
height: 0;
border-style: solid;
border-width: 11px 29px 0 29px;
border-color: #f8f4e9 transparent transparent transparent;
position: absolute;
top: -14px;
content: '';
left: -29px;
z-index: 5;
}
div.blog .blog_date span {
display:block;
width:100%;
}
div.blog .blog_date span.month {
font-size:13px;
height:16px;
margin-top:5px;
}
div.blog .blog_date span.day {
font-size:18px;
height:20px;
color:#c9a976;
}
div.blog .blog_date span.year {
font-size:13px;
height:16px;
}

Answer 3

Try this
.blog_date{
font-family: Times New Roman; /*nearly similar to required font */
width: 100px;
}
div.blog .blog_date span.month {
float: left; /*added*/
font-size: 32px;/*changed*/
height: auto; /*changed*/
margin-top: 5px;
}
div.blog .blog_date span.day {
color: #c9a976;
float: left; /*added*/
font-size: 34px;/*changed*/
font-weight: bold;
height: auto;/*changed*/
}
div.blog .blog_date span.year {
float: left; /*added*/
font-size: 32px;/*changed*/
height: auto;/*changed*/
}
hope this help you.