Search code examples
htmlcsscss-shapes

Asymmetrical background shadow on CSS

I am trying to create a background effect on CSS, currently I am only using a background image shaped like the example:

Background image

But I think there must be a way to do this effect on CSS, I have been looking for this for too long and I can't really find the right answer anywhere, is there a way to do this?

so what I need is an assymetrical background for the container that is done with CSS.

Solution

  • You could do this by using css transform like this:

    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>