CSS div與雙邊框PLUS triange底部

Question

我想在CSS中實現這個（底部的三角形），我開始認爲這是不可能的。

更新：得到它的工作 - 但我真的希望能有一個更好的辦法：

分層4個CSS三角形ontop的海誓山盟的使用：前：後

代碼：http://jsfiddle.net/dtbaker/5fhL1odg/1/

我能夠得到的最接近的是這個（使用css三角形的重疊組合）。

到目前爲止的代碼：

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; 
} 

這將是通過圖像很容易，但如果一些行家在那裏可以算出來，我會非常感謝。

謝謝！

Answer 1

試試這個

.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*/ 
} 

希望這有助於你。

Answer 2

我還沒有嘗試過，但也許你可以畫線來形成三角形的邊界和旋轉玩？雖然可能不會在每個瀏覽器上工作。

-webkit-transform: rotate(45deg); 
 
-moz-transform: rotate(45deg); 
 
-o-transform: rotate(45deg); 
 
-ms-transform: rotate(45deg); 
 
transform: rotate(45deg);

Answer 3

更新：得到它的工作 - 但我真的希望能有一個更好的辦法：

分層4個CSS三角形ontop的海誓山盟的使用：前：

代碼後：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; 
}