如何将特定形状应用于div？

Question

我在网站上有这种形式：

不幸的是，我不知道该怎么做。

我想过clip-path，这是我尝试的一些代码：

HTML（Vue）：

...
<div class="col-md-7">
  <q-gallery-carousel class="gallery-cropper" infinite autoplay :src="gallery"></q-gallery-carousel>
</div>

CSS：

.gallery-cropper {

  clip-path: polygon(
    100% 0%,
    100% 100%,
    10% 100%,
    0% 0%
  );
}

这给了我这个（照片不一样，但你得到的东西）：

现在，我需要做左上角的圆角。我是否必须手动输入所有数千个坐标？？

我也知道clip-path与IE不兼容。我听说加载手动SVG，但我还要手动输入所有坐标吗？ SVG是否适用于<div>？

Answer 1

如果图像不会经常变化，通过Photoshop将图形应用到图像应该很快就会轻松。如果要定期更换图像，那么为图像创建叠加更有意义。

以下是使用SVG的示例，但可以使用PNG完成。

.img-overlay {
  position: relative;
  max-width: 600px; /* prevents overlay from expanding beyond native width of image */
}
.img-overlay svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* Make image responsive. */
.img-overlay img {
  max-width: 100%;
  display: block;
  height: auto;
}

<div class="img-overlay">
<img src="https://unsplash.it/600/400?image=84">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M27,71.5a71.43,71.43,0,0,0,2.48,18.73L105,399H-71V0H98.5A71.5,71.5,0,0,0,27,71.5Z" fill="#b3b3b3"/></svg>
</div>

Answer 2

我们可以通过CSS3 skew()转换来实现这一目标。

• 将img元素包装在容器div中，并使用适当的border-top-left-radius值。
• 将一些skewX()转换应用于图像容器。
• 将相同程度的skewX()转换应用于img元素，但方向相反。

必填HTML：

<div class="image-holder">
  <img src="images/img.jpg" alt="Image Description" />
</div>

必要的CSS：

.image-holder {
  border-top-left-radius: 70px;
  transform-origin: left top;
  transform: skewX(12deg);
  overflow: hidden;
}
.image-holder img {
  transform-origin: left top;
  transform: skewX(-12deg);
}

输出图片：

工作示例：

＆＃13;

＆＃13;

body {
  background: linear-gradient(teal, skyblue);
  min-height: 100vh;
  overflow: hidden;
}
.image-holder {
  border-top-left-radius: 70px;
  transform-origin: left top;
  transform: skewX(12deg);
  overflow: hidden;
}
.image-holder img {
  transform-origin: left top;
  transform: skewX(-12deg);
  display: block;
  height: auto;
  width: 100%;
}

＆＃13;

<div class="image-holder">
  <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该尝试使用border-top-left-radius：

.gallery-cropper {
    clip-path: polygon(
    100% 0%,
    100% 100%,
    10% 100%,
    0% 0%
    );
    border-top-left-radius: 30px; /* change this value until reach the results */
}