Irregular CSS corners?

Question

Have a client request for irregular corners in CSS. Is that even a thing? So far I had experimented with CSS triangles ( http://css-tricks.com/snippets/css/css-triangle/ ) but no bueno.

https://dl.dropbox.com/u/4031469/irreg.png

Thinking I'll probably have to do it with images sadly... unless y'alls know of any way to pull it off.

The main parameters: Needs to be at least flexible in height, preferably flexible in width too, but not required. Current solution: Top capper that extends potentially above the box enough to make the corner effect work on the secondary box... with the lower descender pieces right absolutely aligned pushing below.

My closest attempt so far (uses image for top): https://dl.dropbox.com/u/4031469/fs.html

Answer 1

Stealing from http://nicolasgallagher.com/pure-css-speech-bubbles/

http://jsfiddle.net/aBYHX/

EDIT :- Second attempt. Simpler, less css and on the same side as your example pic. ​ http://jsfiddle.net/aBYHX/1/

<div class="content">
    <p class="triangle-isosceles">This only needs one HTML element.</p>
    <p class="irregular-corner"> ---- </p>
</div>​

Css:

.content
{
    padding: 15px;
}
.triangle-isosceles, .irregular-corner 
{
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c;
}

.triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom: 0; 
    right: 0; 
    border-width: 25px 50px 0 0; 
    border-style: solid;
    border-color: transparent white;
    /* reduce the damage in FF3.0 */
    display:block; 
}


.irregular-corner:before
{
    content:"";
    position:absolute;
    top: -25px; 
    right: 0px; 
    border-width: 25px 50px 0 0;
    border-style:solid;
    border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
}
​