Question

我正在尝试在CSS中实现这个（底部的三角形），我开始认为这是不可能的。

CSS box with double border and triangle bottom

更新：让它运转起来 - 但我希望有更好的方法：

使用：before：after

在彼此的顶部分层4个CSS三角形

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

result

~~我能得到的最接近的是（使用彼此重叠的css三角形的组合）。~~

my attempt

到目前为止

~~代码：~~

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

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

＆＃13;

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

＆＃13;

Answer 2

更新：让它运转 - 但我希望有更好的方法：

使用：before：after

在彼此的顶部分层4个CSS三角形

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

enter image description here

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

试试这个

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

希望这对你有所帮助。

CSS div底部带有双边边框PLUS三角形

3 个答案: