0

コンテンツ div にある角度の付いたタブの高度なスタイルに取り組んでいます。

:before および :after に従って div を形成するための提案を作成して、ほぼ解決しました。ただし、幅の代わりに最大幅を使用するように div 自体を取得しようとして立ち往生しています。

HTML

<br>
<div class="tab">Really really really really really really long content title</div>
<div class="tab-content">Content text</div>

CSS

.

tab-content, .tab, .tab:before, .tab:after {
    background-color: #f5f5f5;
}
body {
    background-color: #666;
}
.tab-content {
    border-left: 1px solid blue;
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    border-top: 1px solid blue;
    margin-top: -1px;
    padding-top:10px;
    padding-bottom:20px;
    padding-left:10px;
    padding-right:10px;
}
.tab:before {
}
.tab {
    max-width: 150px;
    display:block;
    border-left: 1px solid blue;
    border-top: 1px solid blue;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    height: 50px;
    border-radius: 15px 100px 0px 0px;
    position: relative;
    z-index: 100000000;
    line-height:50px;
    padding-left:20px;
}
.tab:after {
    border-right: 1px solid blue;
    border-top: 1px solid blue;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 00px;
    display: block;
    content:" ";
    width: 150px;
    height: 50px;
    top: -1px;
    position: absolute;
    right: -28px;
    transform:skewX(45deg);
    -ms-transform:skewX(45deg);
    -webkit-transform:skewX(45deg);
    z-index: -1;
}

何か案は？

jsFiddle はこちら: http://jsfiddle.net/robmc/ZvEyx/9/

4

2 に答える 2

2

セマンティクスにあまりこだわらない場合は、次を試すことができます。

<div class="tab"><div>Really really really really really...</div></div>

次の CSS ルールを追加します。

.tab div {
    outline: 1px dotted blue; /* for demo only... */
    overflow: hidden;
    height: inherit;
}

子<div>は、SEO に役立つ可能性のあるヘッダーに置き換えることができます。

フィドル: http://jsfiddle.net/audetwebdesign/dyCXT/

于 2013-05-30T01:51:35.140 に答える
1

1 つの方法は、 でテキストの色を透明に設定し、疑似要素を.tab使用して最初の行のテキストのみに色を設定することです。:first-line

.tab {
    color: transparent;
}
.tab:first-line
{
    color: #000;
}

ここにあるjsFiddle

編集

font-size私はそれを少しいじりましたが、さらに良い解決策はとline-heightを.tabに設定することだと思います0px。そして、:first-line疑似要素を使用して好きなものに設定します。このようにして、テキストが選択されたときに目に見えない行が表示されなくなります（これは私の元の回答の問題です）。

.tab:first-line {
    font-size: 16px;
    line-height: 50px;
}
.tab {
    font-size: 0px;
    line-height: 0px;
}

これはjsFiddle、このアプローチの です。

于 2013-05-30T00:37:44.513 に答える