css - 添付例のような H3 を含む CSS div タイトル

Question

私が達成しようとしているこの例を確認してください..

テキストが増えると、タイトルが自動的に引き伸ばされます..ここで見ることができます http://demo.gavick.com/joomla15/mar2009/

乾杯

Answer 1

丸みを帯びた角のある端を持つ背景部分を完全に CSS で作成しますか? 簡単ではありませんが、これらのタブと同じ方法で実行できます(ダブレットを確認してください)。「ストレッチ可能」な側面は簡単な部分です。これdisplay:inline-block;は、含まれている の 1 行のコード ( )だけで処理されるからdivです。

CSSだけで完了、画像は一切ありませんhttp://dabblet.com/gist/3166401

HTML 構造は単純です。

<div class="box-wrapper">
    <div class="heading-container">
        <h3>FEATURED STORY - exapandable: add or remove text here</h3>
    </div>
</div>

CSS:

.box-wrapper {
    width: 600px;
    min-height: 150px;
    margin: 175px auto;
    border: solid 1px #ccc;
    position: relative;
}
.heading-container {
    left: 40px;
    display: inline-block;
    position: absolute;
    background: linear-gradient(#3c72a4, #345a7c);
}
.heading-container h3 {
    margin: 0;
    height: 20px;
    padding: 0 5px;
    font: 700 10px/20px /* 20px, just like the height */ Helvetica;
    color: #fff;
}
.heading-container:before, 
.heading-container:after {
    top: 0;
    width: 20px; /* just like the height of .heading-container */
    height: 20px; /* just like the height of .heading-container */
    position: absolute;
    z-index: -1;
    background: linear-gradient(#3c72a4, #345a7c);
    content: '';
}
.heading-container:before {
    left: -10px; /* 10px = half the height of .heading-container */
    border-radius: 0 0 0 25%; /* 25% = a quarter (of 20px) */
    transform: skewX(25deg);
}
.heading-container:after {
    right: -10px; /* 10px = half the height of .heading-container */
    border-radius: 0 0 25% 0; /* 25% = a quarter (of 20px) */
    transform: skewX(-25deg);
}
.heading-container h3:before, 
.heading-container h3:after {
    top: 0;
    width: 5px; /* same as the border-radius for .heading-container:before and :after */
    height: 5px; /* same as the border-radius for .heading-container:before and :after */
    position: absolute;
    background: #f00;
    content: '';
}
.heading-container h3:before {
    left: -18px;
    transform: skewX(25deg);
    background: radial-gradient(left bottom, 
        rgba(255, 255, 255, 0) 70.71%, #3b7a9c 70.71%);
    /* 70.71% = (2 * 100%)/sqrt(2) */
}
.heading-container h3:after {
    right: -18px;
    transform: skewX(-25deg);
    background: radial-gradient(right bottom, 
        rgba(255, 255, 255, 0) 70.71%, #3b7a9c 70.71%);
}

Answer 2

<h3>要素の背景画像の幅が 20pxであると仮定しましょう。

その中にも適用display:inline-blockしてください。次に、 の背景画像の幅を考慮して、margin-left の値を に設定し、上に移動させます (実際には、h3 の背景画像が表示されます)。<h3><span><h3><span>

h3, h3 span {
 display: inline-block;
}

h3 span {
 margin-left: 20px; /* This is assuming that the background-image of h3 is 20px wide; change accordingly */
}

すべてが完了したら、要素の後に改行 ( <br>) を追加します。すべて問題ありません。<h3>または、改行のために別のブロック要素/div で他のテキストをラップすることができます。

Answer 3

h3 子スパンに 87% の幅を設定します。

div.moduletable h3 span { 
  width:87%;
}