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

Question

我在这里有一张图片来显示我的问题
我希望在重叠的标题下方有一个阴影。这在 asp.net mvc3 的 CSS 中可能吗？
这是一个演示它的小提琴。

我的Hmtl

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

Answer 1

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

参见 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 设置为负值，标题和正文都位于折叠的顶部。这就是为什么我们需要将背景颜色设置为白色。

Answer 2

也就是所谓的Ribbon。

您可以使用此站点生成功能区

http://www.css3d.net/ribbon-generator/

它为您提供了generated code可以轻松添加到元素中的内容。