Question

请检查我想要实现的这个例子..

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

欢呼声

Answer 1

您是否希望完全在CSS中完成圆角边的背景部分？这不容易，但可以像these tabs一样完成（检查dabblet）。 “strechable”方面很容易，因为它仅由包含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>的背景图像的宽度，我们将边缘值设置为<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

将宽度为87％放在h3子跨度中：

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

带有H3的CSS div标题，如附图所示

3 个答案: