left aslope picture in css

Question

I want to have an image but I want it to left aslope. Have a look at the image for What I mean:

But what I have is like this right now:

And here is my code for this:

<div class="col-lg-5 col-md-12 col-sm-12">
                //SOMETHING HERE
              </div>
              <div class="col-lg-6 col-md-12 col-sm-12 login__right"></div>

and my css:

.login .login__right {
  background-image: url(../img/salad.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 784px;
  width: 100%;
}

could you please help me with it?

Thanks...

Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=css+sloped+edge+site:stackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jun 30 '21 at 12:00
Also https://stackoverflow.com/questions/53982736/slanted-div-border-transparency — mplungjan, Jun 30 '21 at 12:00

score 3 · Answer 1 · answered Jun 30 '21 at 12:02

You can use clip-path property

Take a look at this to generate one easily

.login__right {
  background-image: url("https://images.unsplash.com/photo-1591234441445-8a8abc615fbf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNTA1NDM5NA&ixlib=rb-1.2.1&q=85");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 284px;
  width: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

<div class="login__right"></div>

score 3 · Accepted Answer · answered Jun 30 '21 at 12:06

3

Use Clip-path:

Here's the Clip-path editor: https://bennettfeely.com/clippy/

Here's the code:

img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}

<img src="https://via.placeholder.com/200">

answered Jun 30 '21 at 12:06

GucciBananaKing99

1,473
1
11
31

left aslope picture in css

2 Answers2