How to make 3-corner-rounded triangle in CSS

Question

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

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 1

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

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

.triangle {  	position: relative;  	background-color: orange;  	text-align: left;  }  .triangle:before,  .triangle:after {  	content: '';  	position: absolute;  	background-color: inherit;  }  .triangle,  .triangle:before,  .triangle:after {  	width:  10em;  	height: 10em;  	border-top-right-radius: 30%;  }    .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%);  }

<div class="triangle"></div>