使用CSS创建流体三角形

时间:2013-11-28 10:37:33

标签: css css3 geometry

我想在CSS中创建这个三角形。 http://acceptatie.foursites.nl/foursites/vierkant.jpg

但它必须是一个流动的三角形。我怎么能做到这一点我尝试与skewY。但是三角形在元素的位置被打破了。

感谢您帮助我!

1 个答案:

答案 0 :(得分:1)

您可以使用transform来旋转div而不是使用border来制作三角形,而只是隐藏父元素的溢出。

如果使用变换而不是边框​​,则div上的框阴影可以:)

转动div的转换代码

-webkit-transform: rotate(357deg);
-moz-transform:    rotate(357deg);
-ms-transform:     rotate(357deg);
-o-transform:      rotate(357deg);

正如我所说,只是隐藏父元素上的溢出,在你的情况下是body标签

overflow: hidden;

但这是jsfiddle

上的一个例子

希望你能用它。