Irregular CSS corners? - css

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

Answer 2

Under CSS3, as far as I've researched, the particulars of this look make it not yet possible.
This look has a subtle gradient and inner glow, which we've accomplished using an inset box shadow... that seems to not work with the prior css triangle effects.
CSS Masks look like they might be able to assist in many circumstances, but in circumstances requiring box-shadow: inset, images are the only way to go.
Today I got this working using the -webkit-clip-path property, which has varying browser support.
.entry{
background-color: blue;
width: 500px;
height: 200px;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
-webkit-transform: translateY(-30px);
top: 10px;
left: 0;
}
body{
background-color: green;
}
http://codepen.io/randallb/pen/tmlAH

Answer 3

Nora Brown wrote a lovely article on the CSS3 border-image property. It's worth a quick read...
If you're worried about cross-browser support (and you should be), then offer a graceful fallback. Perhaps just having a border with no "crazy corners" would do as a fallback situation, perhaps not.
This method isn't cross-browser, but some find it nice to be "progressive".