一侧旋转的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 从顶部计算。

例如，XY - 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