Murray Smith Murray Smith - 2 months ago 9
CSS Question

How to make 3-corner-rounded triangle in CSS

I'd like to achieve a custom-colored shape like this using no Javascript:
3 corner rounded triangle

Currently I'm overlaying an image of the 'frame' over an orange rectangular div, but this is pretty hacky.
I suppose I could use a dynamically generated canvas element, but that not only requires JS, but HTML5 canvas support. Any ideas?

Answer

My best attempt: http://dabblet.com/gist/4592062 final

Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :)

.triangle,
.triangle:before,
.triangle:after {
    width:  10em;
    height: 10em;
    position: relative;
    background: orange;
    border-top-right-radius: 30%;
}
.triangle:before,
.triangle:after {
    content: '';
    position: absolute;
}

.triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

EDIT: to point the triangle in a different direction you can just change the rotation of the .triangle element itself (leave :before and :after alone), like so

.triangle {
    /* pointing right, like a play button */
    transform: rotate(30deg) skewX(-30deg) scale(1,.866);
    /* pointing left, like something whatever */
    transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
Comments