一侧旋转的css div

Question

Do you know if is possible to create a div, with the top side rotate or inclined like this image:

As you can see, the top border of the black div have a inclination, but I don't know if this is possible or how to make this.

Thanks for your help.

Answer 1

You can't make a single shape that looks like that but you can fake it with a rectangle and a triangle. Something like this:

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

You can use clip-path CSS property to make the shapes you want.

For the image shown below, here's the clip-path

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

Each point - X and Y where X is calculated from the left side of the screen and Y from the top.

For example, XY - 0 0 (means the point1 is 0px from left and 0px from top)

You can make use of the clip-path calculator to make the shapes you like and copy the CSS related to that here https://bennettfeely.com/clippy/

Resources:

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

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

If you want to rotate the div, then make use of transform and rotate property as shown here https://3dtransforms.desandro.com/perspective