ASP.NET MVC3中的标题样式

Question

我这里有一张图片来展示我的问题
我希望在过度标题之下有一个影子。这在asp.net mvc3的CSS中是否可行？ 这是一个fiddle来说明它。

我的 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

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

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负设置放在首页上。这就是我们需要将背景颜色设置为白色的原因。

Answer 2

称为Ribbon。

您可以使用此网站生成色带

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

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