css - 如何在CSS中制作三 Angular 圆 Angular 三 Angular 形

Question

我想在不使用 Javascript 的情况下实现这样的自定义颜色形状:

目前，我正在将“框架”的图像覆盖在橙色矩形 div 上，但这很老套。我想我可以使用动态生成的 Canvas 元素，但这不仅需要 JS，还需要 HTML5 Canvas 支持。有什么想法吗？

Answer 1

我最好的尝试:http://dabblet.com/gist/4592062

任何尺寸的像素完美，使用比 Ana 的原始解决方案更简单的数学，并且在我看来更直观:)

.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>