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

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