Question

please check this example which I am trying to achieve..

the title is automatically stretched when there is more text.. it can be seen here
http://demo.gavick.com/joomla15/mar2009/

cheers

Answer 1

Do you want the background part with the rounded angled ends done entirely in CSS? It isn’t easy, but it can be done, in the same manner as these tabs (check the dabblet). The “strechable” aspect is the easy part, as it’s handled by just one line of code (display:inline-block;) on the containing div.

Done with just CSS, absolutely no images http://dabblet.com/gist/3166401

HTML structure is simple:

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

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