Search code examples
htmlcssright-to-left

left aslope picture in css

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

But what I have is like this right now: enter image description here

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...

Solution

  • 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">