Home/ Questions/Q 9164809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:46:10+00:00

I’d like to achieve a custom-colored shape like this using no Javascript: Currently I’m

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 {
	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>
    • 0