一側旋轉的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