css - 使用 CSS 创建流体三 Angular 形

Question

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

但它必须是一个流动的三 Angular 形。我怎样才能做到这一点，我尝试使用 skewY。但是三 Angular 形在元素的顶端断开了。

谢谢你帮助我!

Answer 1

除了使用边框制作三 Angular 形外，您还可以使用变换来旋转 div 并仅隐藏父元素的溢出部分。

如果使用变换而不是边框​​，您可以在 div 上添加框阴影 :)

旋转div的转换代码

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

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

overflow: hidden;

但这里有一个关于 jsfiddle 的例子

希望你能用上它。