0

CSSのみを使用して、以下のような見出しの背景を作成したいと思います。

ここに画像の説明を入力してください

三角形を作成することはできますが、正しく配置できません。HTMLは次のように単純です。

<h1><a href="#">Link ...</a></h1>

CSSは次のとおりです。

h1{ 
    margin: 20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent #0000ff;
}

JSFiddleデモ。 http://jsfiddle.net/yGsny/

4

3 に答える 3

2

あなたの問題で考えられる解決策の1つは次のとおりです。

  h1{
        background:blue;
        line-height:30px;
        padding:0 20px;
        width:50px;
        position:relative;
    }
    a{color:white; text-decoration:none;}
    h1:before{
        position:absolute;
        left:100%;
        top:0;
        content:"";
        border:30px solid blue;
        border-width:0px 30px 30px 0px;
        border-color:transparent transparent blue transparent;
    }

フィドル

于 2013-02-14T12:01:34.823 に答える
1

これが役立つかどうかを確認してください http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 泡の下の三角形。

また、このサイトには役立つ記事が他にもたくさんあります。

于 2013-02-14T11:42:53.337 に答える
0

パディング+負のテキストインデントを使用してみてください。これでうまくいくはずです:)

于 2013-02-14T11:43:19.783 に答える