html - ASP.NET MVC3中的标题样式

我这里有一张图片来显示我的问题

我想在隐藏标题下方添加阴影元素。在asp.net mvc3的CSS中有可能吗？
这是一个fiddle演示它。
我的妈妈

<div class="postContainer">
        <div class="postTitle">Title</div>
        <p align="center">body</p>
    </div>

我的CSS

.postTitle
{
    margin:5px auto auto -10px;
    text-align:left;
    width:280px;
    height:35px;
    font-size:20px;
    font-family:Arial;
    padding:5px 0px 5px 30px;
    background-color:green;
    color:White;
    font-weight:400;
    position:relative;
}

.postContainer
{
    width:300px;
    margin: 0px 0px auto 0px;
    border:1px solid black;
}

最佳答案

添加这些规则，它将起作用。



See on jsFiddle

.postTitle:before {
    content:"";
    block:display;
    position:absolute;
    width:15px;
    height:15px;
    background-color:#000;
    left:4px;
    bottom:-10px;
    -moz-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
    z-index:-1;
}
.postContainer {
    background-color:#FFF;
}

这就是实际绘制的内容，我们将z-index负值设置为标题和正文都放在首位。这就是为什么我们需要将背景色设置为白色的原因。