使用CSS创建流体三角形

Question

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

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

感谢您帮助我！

Answer 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

上的一个例子

希望你能用它。