ASP.NET MVC3中的標題樣式

我在這裏有一個圖像來顯示我的問題 enter image description here
我想要在過度標題下面有一個影子。這在asp.net mvc3的CSS中可能嗎？
下面是一個fiddle來展示它。

我HMTLASP.NET MVC3中的標題樣式

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

來源

2013-03-07 bot

我不相信你可以做到這一點（不完全是一個CSS專家）。過去，這已經被包括在背景圖像中。 – 2013-03-07 07:27:02

哈哈哈..其實我也在想這是有點不可能，但也許有人找到了一種方法，誰知道對嗎？：D – bot 2013-03-07 07:32:56

@bot，我不明白你爲什麼說我的答案？ – 2013-03-07 07:42:04

添加這些規則，它會工作。

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

這是實際上是被拉伸，我們設置z-index的負標題和身體去折的頂部。這就是爲什麼我們需要將背景顏色設置爲白色。

Explanation

來源

2013-03-07 07:31:04

練習，練習，練習:) – 2013-03-07 07:36:02

印象非常深刻。 +1。 – 2013-03-07 07:36:27

嗯..嗯..我知道..：D謝謝..你很awsome .. ^^ – bot 2013-03-07 07:36:45

這被稱爲Ribbon。

您可以使用本網站

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

它可以讓你可以很容易地添加到您的元素generated code產生的絲帶。

來源

2013-03-07 08:04:46 Sowmya

+1 ..好吧，我甚至會把這個作爲一個選項..謝謝.. :) – bot 2013-03-07 08:08:33

ASP.NET MVC3中的標題樣式

回答

相關問題