如何将特定形状应用于 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

您应该尝试使用 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 */
}

Answer 2

如果图像不会经常更改，通过 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 3

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

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

必填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);
}

输出图像：

工作示例：

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%;
}

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

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

How to apply a specific shape to a div?

html

css

svg

css-shapes