CSS asymmetric background shadow

Question

I am trying to create a background effect for CSS, currently I am only using a background image in the form:

But I think there should be a way to make this effect on CSS, I have been looking for this for too long, and I cannot find the right answer anywhere, is there any way to do this?

so what I need is an asymmetric background for a container that runs with CSS.

Answer 1

You can do this using css transform as follows:

JSFiddle - DEMO

body {
    background:url('http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Drops-On-Green-Background-720x405.jpg')
}
div {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 22px;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    -webkit-transform: perspective(600px) rotateX(15deg);
    -moz-transform: perspective(600px) rotateX(15deg);
    transform: perspective(600px) rotateX(15deg);
    display: table;
    padding: 0 40px;
    box-sizing: border-box;
}
p {
    display: table-cell;
    vertical-align: middle;
    -webkit-transform: perspective(600px) rotateX(-15deg);
    -moz-transform: perspective(600px) rotateX(-15deg);
    transform: perspective(600px) rotateX(-15deg);
}

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus vestibulum elementum. Vivamus feugiat diam eget aliquet fringilla. Nullam et ex id dui malesuada bibendum. Duis interdum pharetra nibh sit amet lacinia. Sed sit amet fermentum diam. Nulla euismod libero nibh, ac volutpat nulla luctus vitae. Nulla sit amet lectus odio.</p>
</div>

Run codeHide result