Med fokus på din virksomheds forretningsgange watermark with eaktion circles

Pure CSS Folded Corners

A few days ago I stumbled upon this post by Nicolas Gallagher about making folded corners with css only. I love the result and the pure css approach.

Only, I noticed a problem in Chrome (mine says: Chrome 17.0.963.56 m, I’ve seen it also in 17.0.963.65 m) where for rounded corners the folded corner does not work (the triangle, that is supposed to be background color, is foreground color instead).

Here I show a quick, not-so-perfect fix that does the job.

I noticed that the flaw happens when the radius is equal or smaller than the border thickness. My solution is therefore, only for webkit browsers, to use a border radius that is 1 px wider than the border. In this way the folded corner has a different shape than the others, however it is still better than a flawed effect. And in the end, the folded corner is naturally worn out by folding it, isn’t it,  so I don’t see anything strange about it having a bit “flossy” edges.

To see the whole css code for the folded corners please read the original post by the author. You’ll see the flaw in the demo, not in the explanation post, because the latter shows a picture of the note.

Below, an excerpt of the css code as in the original version (comments are mine)

.note.rounded:before {
    border-width:8px;
    border-color:#fff #fff transparent transparent;
    -webkit-border-bottom-left-radius:5px;/* Chrome flaw */
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

And here, the css code as in the fixed version (change the radius and move the web-kit version only, below the others)

.note.rounded:before {
    border-width:8px;
    border-color:#fff #fff transparent transparent;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
    -webkit-border-bottom-left-radius:9px;
/*
    in Chrome, radius must be 1
    px wider than border-width
    otherwise the bg colour is not shown
*/
}

Tags: , , , ,

Leave a Reply