css div，一边旋转

Question

您知道是否可以创建div，顶部像这张图像一样旋转或倾斜：

正如你所看到的，黑色div的顶部边框有倾向，但我不知道这是否可能或如何做到这一点。

感谢您的帮助。

Answer 1

你不能制作一个看起来像这样的形状但你可以用矩形和三角形伪造它。像这样：

HTML

<div class='shape'></div>

CSS

.shape { 
    position: relative;
    height: 100px;
    width: 500px; 
    background: black;
    margin-top: 120px;
}

.shape:before {
    position: absolute;
    content: '';
    width: 0; 
    height: 0; 
    left: 0;
    top: -20px;
    border-bottom: 20px solid black; 
    border-right: 500px solid rgba(255, 255, 255, 0);
    /* Maintain smooth edge of triangle in FF */
    -moz-transform: scale(.9999);
} 

http://jsfiddle.net/VQv5n/

Answer 2

您可以使用 clip-path CSS 属性来制作您想要的形状。

对于下面显示的图像，这里是剪辑路径

clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); /* polygon(point1, point2, point3, point4) */

每个点 - X 和 Y 其中 X 从屏幕左侧开始计算，Y 从屏幕顶部开始计算。

例如 X Y - 0 0（表示点 1 距左侧 0px 距顶部 0px）

您可以使用剪辑路径计算器制作您喜欢的形状并在此处复制与之相关的 CSS https://bennettfeely.com/clippy/

资源：

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

https://www.w3schools.com/cssref/css3_pr_clip-path.asp

如果您想旋转 div，请使用变换和旋转属性，如下所示https://3dtransforms.desandro.com/perspective