如何在CSS中制作三角形的三角形

前端之家收集整理的这篇文章主要介绍了如何在CSS中制作三角形的三角形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用没有Javascript来实现这样的自定义颜色的形状:

目前,我正在将“框架”的图像覆盖在一个橙色的矩形div上,但这很漂亮。
我想我可以使用动态生成的画布元素,但这不仅需要JS,而且还需要HTML5画布支持。有任何想法吗?

解决方法

我最好的尝试: 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>
原文链接:https://www.f2er.com/css/219322.html

猜你在找的CSS相关文章