Search code examples
htmlcssribbon

Title styling in ASP.NET MVC3

I have here an image to show my problem enter image description here
I want to have a shadow thing below the ovelapping title. Is this possible in CSS of asp.net mvc3?
Here's a fiddle to demostrate it.

My Hmtl

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

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

  • Add these rules and it will work.

    End result

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

    This is what is actually being drawn and we're setting the z-index negative to both the title and body go on top of the fold. This is why we need to set the background color to white.

    Explanation