1

現在、1 つのページに多数のリンク セクションを含む Web ページがあります。各セクションには、次のようなヘッダーがあります。

ここに画像の説明を入力

このヘッダーの背景は、実際には 2 つの画像です。1 つ目は単なる長方形で、2 つ目は斜めになっています。このソリューションを検討していたとき、これを画像ではなく CSS で解決できないかと考えていました。私は CSS の第一人者ではありませんが、いくつかの例を見て、同様の作業を行うことができました。ただし、背景の上にテキストを配置しようとすると、色の内側ではなく上になってしまいます。私が持っているCSSにも固定サイズがありますが、これはアイデアよりも少ないです. 使用可能な領域のパーセンテージを指定して、色で塗りつぶしたいと思います。

これが私が取り組んできたコードです：

<STYLE type="text/css">
  .mini_banner 
  {
     display:inline;
     border-bottom:30px solid blue; 
     border-left:0px solid transparent;
     border-right:30px solid transparent;
  }
</STYLE>

これを表のセルに適用したかったのです。また、最新のブラウザーとの互換性を壊したくありません。私の「顧客」(主に社内の人) は主に IE8 以降を使用する予定ですが、できることなら自分自身を制限したくありません。

まず、これは可能ですか？第二に、どうすればこれを達成できますか？第三に、固定ではなく相対的なスケールにする方法はありますか?

4

2 に答える 2

3

単一の背景画像を使用することに戻せば、頭痛の種がずっと少なくなると思います。この場合は、ノッチが切り取られた白い画像 (アルファ透明度の PNG-24) です。必要だと思うよりも約 200% 大きくしてから、次のようにします。

.minibanner {
   background: blue url(..images/notch.png) no-repeat middle right;
   font-size: 1.5em;
 }

その理由は、境界線のサイズに依存すると、ブラウザー間で多少のぎこちなさが生じる可能性があり、要素が 2 行に及ぶと明らかに奇妙に見えるからです。

ノッチ イメージを 200 ～ 300% 大きくして、垂直方向に背景の中央に配置し、フォント サイズを大きくすると、ボックスは大きくなりますが、白いノッチもそれに合わせて大きくなります。

アップデート：

これをやってのけることができる他の唯一の方法は、テキストの後に a などの非セマンティック要素を追加することです。

<div>
    <p>Hello text</p>
    <span></span>
</div>

次に、CSS で:

    p { 
        background: blue; 
        color: white;
        float: left;
        padding: 0 20px;
        height: 50px;
        margin:0;
        line-height: 50px;
        }
    span {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 0px solid transparent;
        display: inline-block;
        border-left: 50px solid blue;
    }

このJSFiddleを参照してください。

形状は、CSS 三角形に関するこのチュートリアルに基づいています。今、私はこれを Webkit ベースのブラウザーでのみ試しましたが、動作します。フォントサイズを変更するたびに高さを調整する必要があるため、これが欠点です。

于 2012-04-13T13:33:08.940 に答える
2

余分なスパンなしで機能するようにしました: jsFiddle

.mini_banner
{
    width:18em; height:1.5em;
    color:white; font-weight:bold; padding-left:0.5em;
    margin-bottom:.5em;
}
.mini_banner:before {
    display:inline-block; content:''; overflow:hidden;
    width:17em; height:0;
    margin-bottom:-1.5em; margin-left:-.5em;
    border-bottom:1.5em solid blue;
    border-right:1.5em solid transparent;
}

FF、Safari、Opera、IE でテスト済み。(IE8 では動作しますが、IE7 では動作しません)

于 2012-04-13T18:03:13.270 に答える