0

ここに私の問題を示す画像があります ここに画像の説明を入力
。重複するタイトルの下に影を付けたいと思っています。これは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;
}
4

2 に答える 2

4

これらのルールを追加すると、機能します。

最終結果

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を負に設定して、タイトルと本文の両方を折り畳みの上に配置します。これが、背景色を白に設定する必要がある理由です。

説明

于 2013-03-07T07:31:04.533 に答える
3

といいますRibbon。

このサイトを使用してリボンを生成できます

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

generated code要素に簡単に追加できる を提供します。

于 2013-03-07T08:04:46.637 に答える