css - 带有 H3 的 CSS div 标题，如附加的示例

Question

请检查我试图实现的这个例子..

当有更多文字时，标题会自动拉伸..可以在这里看到 http://demo.gavick.com/joomla15/mar2009/

干杯

Answer 1

您是否想要完全在 CSS 中完成带有圆角末端的背景部分？这并不容易，但可以按照与这些选项卡相同的方式完成（检查 dabblet）。“可拉伸”方面是最简单的部分，因为它仅由display:inline-block;包含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于<h3>以及<span>其中。然后，考虑到背景图像的宽度<h3>，我们将设置 margin-left 的值以<span>使其移动（实际上，这将显示 h3 的背景图像）。

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%;
}