如何使用html css将图像显示为附加形状

.img-container {
    background-image: url('https://loremflickr.com/680/520/car,forest');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 42px 42px 4px;
    position: relative;
    width: 600px;
    height: 320px;
    background-position: 100%;
}

.img-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 182px;
    height: calc(100% + 2px);
    background: linear-gradient(to top left, transparent 50%, white 50.1%)
      bottom left / 182px no-repeat transparent;
}

<div class="img-container"></div>

.img-container {
  border-radius: 10px;
  height: 250px;
  width: 400px;
  overflow: hidden;
  transform-origin: bottom;
  transform: skewX(-20deg);
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px 42px 42px 4px;
  transform-origin: bottom;
  transform: skewX(20deg); /* the opposite value here */
}

<div class="img-container">
  <img src="https://loremflickr.com/680/520/car,forest">
</div>

Html相关问答推荐

Flexbox嵌套div溢出

如何只混合部分的背景而不是内容<>

UseEffect()从不调用preact

Tumblr博客：如何修复提交页面和询问页面框列计数问题？

如何在图像中垂直和水平居中显示文本？

图像不在HTML文件中显示

当溢出到滚动条中时， bootstrap 按钮样式会更改

我无法从带Angular 的Bootstrap 5中的表单中获取数据

如何在垂直堆叠的表格中调整人造列的大小？

rmarkdown HTML数字不适用于针织衫_1.44

带有数据 URI 的音频在 Chrome 中失败

如何实现与内嵌图像对齐的自动换行？

CSS flex：0 0 auto创建了1像素的间隙

如何消除线性渐变线的模糊？

ul li 右侧的 Bootstrap 加载微调器

如何使我的设计适合与我的框架尺寸不同的视口？

使用 css 将内容居中并向左对齐？

如何通过可见文本使用 Selenium 定位元素

如何在 blazor 中单击单个按钮调用 2 个等待任务

如何让 Reindeer 居中