2

テキスト要素 ◥ を追加して、ヘッダーの背景色を長方形の吹き出しのように見せようとしています。以下に、背景形状のスパン テキストと ◥ のスタイルを示します。でもこれだとボーダーの下と◥の間に空白ができてしまうので、2つ並べてふきだしみたいにしたいです。

失敗のイメージ。 http://i.imgur.com/1T09F.png

{block:Link}      
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞&lt;/a></span>
        <div class="triangle">◥&lt;/div>
    </h1>
{block:Description}{Description}{/block:Description}    
{/block:Link}


.triangle{
    margin-left: 10px;
    font-size: 35px;
    color: #123033;
}
span.Headers{
    display: block;
    background-color: #123033;
    padding: 8px
}

フォント サイズが 0 の親グループを追加してこのトリックを試しましたが、うまくいきませんでした。また、ヘッダーのマージンを 0 に設定しませんでした。同じ行に ◥ div を配置しても、何も行われませんでした。他の質問を調べて何ができるかを確認するのに約 1 時間費やしましたが、解決策を見つけることができませんでした。

4

2 に答える 2

1

生成されたコンテンツを使用できる場合 (サイトのユーザーによって異なると思います)、次のことをお勧めします (デモ用に HTML を少し修正しました)。

<h1><span class="Headers"><a href="#something">a name</a></span></h1>​

次の CSS:

h1 {
    display: block;
    position: relative;
    background-color: #ffa;
    padding: 0.5em;
}

h1::after {
    content: '';
    border: 1em solid #ffa;
    position: absolute;
    top: 100%;
    left: 2em;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

JS フィドルのデモ。

互換性に関して、caniuseは、生成されたコンテンツがバージョン 8 以降の IE でサポートされることを示唆しています。

参考文献:

于 2012-09-10T12:05:55.713 に答える
1

テキストを使用して効果を作成することは信頼できません。デバイスが異なればレンダリングも異なりますが、これは望ましくありません。

あなたの場合、同じ色の画像を使用し<div/>、見出しの下に配置して、それらが互いに接触するようにするのが最善です. 次に、スタイルで行ったように、左側にパディングを追加します.triangle。

使用する画像を作成しました:ここから入手してください

全体として、マークアップは次のようになります。

HTML:

{block:Link}   
    <div class="header">
        <h1><a href="{URL}" {Target}>{Name} ☞&lt;/a></h1>
        <div class="triangle"></div>
    </div>  
{block:Description}{Description}{/block:Description}    
{/block:Link}

CSS:

div.header > h1 {
    background-color: #123033;
    padding: 8px
}

div.header > div.triangle {
    background: url('Arrow.png') top left no-repeat;
    height: 50px;
    padding-left: 10px
}

これがうまくいくかどうか教えてください。

于 2012-09-10T11:09:06.093 に答える