css 中的左斜坡图片

Question

我想要一个图像，但我希望它向左倾斜。看看我的意思的图像：

但我现在拥有的是这样的：

这是我的代码：

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

和我的 css:

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

你能帮我解决一下吗？

谢谢...

Answer 1

您可以使用 clip-path 属性

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

Answer 2

使用剪辑路径：

这里是 Clip-path 编辑：https://bennettfeely.com/clippy/

代码如下：

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

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

css 中的左斜坡图片

left aslope picture in css

html

css

right-to-left