2

書き直しのためにレガシーアプリを継承しましたが、奇妙な問題に遭遇しました。表のタイトルがマニラ封筒タブに似た台形の形状内にあるページに表形式のデータが表示されます。このようなテーブルの下部には、通常、テーブル タイトルと同じ形状で 180 度回転したボタン列があります。現在、この効果は、台形の外観を実現するために、長方形のブロックの隅にある背景画像として、透明な背景に半分に白い三角形がある正方形の画像を使用することによって実現されています。ただし、この手法では、ページが更新されたときにちらつきが発生しやすくなります。

演習として、これを純粋な CSS 手法で置き換えることができるかどうかを確認しようとしました。CSS のさまざまな形状へのこのリンクを見つけ、必要に応じて台形をエミュレートしました。テーブル タイトル テキストを台形内に正しく配置できます。ただし、180°回転した台形の外観が必要な場合、図形内にテキストを配置できません。私のコードは以下に含まれています。これは、これまでに達成したことを示すjsFiddleです。高さが0に設定されており、border-topを使用して形状を構築しているため、回転した台形の下にテキストが表示されることを理解しています。これを正しく機能させるためにできることはありますか?

これを IE8 で表示する必要があることに注意してください (また、互換モードの IE8 -- IE7 も表示される可能性があります)。また、これを可能な限りセマンティックに保ちたいので、追加の HTML 要素を最小限に抑えたいと思います。div 内にスパンを配置し、そのスパンを図形内にテキストが表示されるように絶対に配置できることはわかっていますが、その場合、台形の幅を手動で設定する必要があり、幅がボタン行からボタン行、その道をたどりたくありません。

ありがとう。

HTML:

<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>​

CSS:

.trap {
    color: black;
    font: normal bold 13px Arial;
    border-bottom: 27px solid #F00;
    border-right: 27px solid transparent;
    height: 0px;
    float: left;
    line-height: 27px;
    padding: 0 4px;
}

.trap180 {
    clear: both;
    color: black;
    font: normal bold 13px Arial;
    border-top: 27px solid #F00;
    border-left: 27px solid transparent;
    height: 0px;
    float: right;
    margin: 20px 0 0 0;
    line-height: 27px;
    padding: 0px 4px 0;
}​
4

1 に答える 1

1

疑似要素で可能です。しかし、私はそれらの古いブラウザーにアクセスしてテストすることができません。

.trap, .trap180 {
    color: black;
    font: normal bold 13px Arial;
    float: left;
    line-height: 30px;
    height: 30px;
    padding: 0 4px;
    background: salmon;
    position: relative;
}

.trap180 {
    float: right;
    margin: 20px 0 0 0;
}

.trap:after,.trap180:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 40px;
    top: 0;
}
.trap:after {
    right: -30px;
    border-bottom: 30px solid salmon;
    border-right: 30px solid transparent;
    z-index: -10;
}
.trap180:after {
    left: -30px;
    border-top: 30px solid salmon;
    border-left: 30px solid transparent;
    z-index: -10;
}
​

デモ

率直に言って、それでも IE7 をサポートする必要がある場合は、画像を使用するか、少し適切な劣化を許容します。

于 2012-10-26T13:37:21.820 に答える