html - 底部带有双边框 PLUS triange 的 CSS div

Question

我正试图在 CSS 中实现这一点(底部的三 Angular 形)，但我开始认为这是不可能的。

更新:成功了 - 但我希望有更好的方法:

使用 :before :after 将 4 个 CSS 三 Angular 形叠加在一起

代码:http://jsfiddle.net/dtbaker/5fhL1odg/1/

我能得到的最接近的是这个(使用相互重叠的 css 三 Angular 形的组合)。

到目前为止的代码:

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

我还没有尝试过，但也许你可以画线来形成三 Angular 形的边界并玩转旋转？虽然可能不会在所有浏览器上工作。

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