html - 一侧旋转的css div

Question

你知道是否可以创建一个顶部旋转或倾斜的 div，如下图所示:

如你所见，黑色div的上边框有一个倾斜，但我不知道这是否可能或如何实现。

感谢您的帮助。

Answer 1

您无法制作看起来像那样的单一形状，但您可以用矩形和三 Angular 形来伪造它。像这样:

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/