css巧妙应用展示列表的时间阴影关键部位

CSS3块阴影通常用box-shadow，但是今天我们换另一个方法来实现块阴影。

这里我们主要介绍利用border和transparent。

主要css代码：

.mod-category__article-time:after {
    content: "";
    position: absolute;
    top: 45px;
    left: 0;
    border-color: transparent #bbb transparent transparent;
    border-style: solid;
    border-width: 0 50px 20px 0;
    height: 0;
    width: 0;
}

<style>
.mod-category__article-time {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 70px;
    height: 45px;
    background: #e5e5e5;
    filter: alpha(opacity=80);
    background: hsla(0,0%,80%,.4);
}
.mod-category__article-time span {
    float: left;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    text-indent: 10px;
}
.mod-category__article-time:after {
    content: "";
    position: absolute;
    top: 45px;
    left: 0;
    border-color: transparent #bbb transparent transparent;
    border-style: solid;
    border-width: 0 50px 20px 0;
    height: 0;
    width: 0;
}
</style>
<div class="mod-category__article-time">
    <span>2021/03</span>
    <span>06&nbsp;&nbsp;周六</span>
</div>