将图像放入使用纯 CSS 完成的基本梯形？答案

【问题标题】：Putting an image inside a basic trapezoid done with pure CSS?将图像放入使用纯 CSS 完成的基本梯形？
【发布时间】：2018-05-03 15:23:32
【问题描述】：

有没有办法将顶部的图像放在底部的红色区域内？

我尝试了不同的组合，但没有成功。

您能提供一个带有工作代码的 JSFiddle 吗？

#rectangle {
  width: 400px;
  height: 100px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
}
#trapezoid {
    border-top: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    height: 0;
    width: 200px;
}

<div id="rectangle"></div>
<br />
<div id="trapezoid"></div>

我的目的是建立一个框架。所以我要这样做4次（每个边缘）。但是，如果我知道如何为顶部边缘做这件事，我可以为其余部分做。

谢谢！

【问题讨论】：

标签： css html

【解决方案1】：

clip-path 可能会派上用场。

#rectangle {
  width: 400px;
  height: 100px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
  clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
}

&lt;div id="rectangle"&gt;&lt;/div&gt;

这是一个全帧的尝试：

.any-picture {
  width: 450px;
  height: 120px;
  padding: 80px;
  background-color: #BADA55;
  background-clip: content-box;
}

picture-frame {
  position: relative;
  display: inline-block;
  background-color: #20180e;
}

picture-frame f-t,
picture-frame f-b,
picture-frame f-r,
picture-frame f-l {
  position: absolute;
  background-image: url(https://image.ibb.co/e5Kaw7/image.png);
  background-size: contain;
  height: 80px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 80px 100%);
  display: block;
}

picture-frame f-r,
picture-frame f-l {
  bottom: -80px;
  width: 280px;
}

picture-frame f-r {
  transform: rotate(90deg);
  transform-origin: top right;
  right: 0;
}

picture-frame f-l {
  transform: rotate(-90deg);
  left: 0;
  transform-origin: top left;
}

picture-frame f-b {
  transform: rotate(180deg);
  bottom: 0;
}

<picture-frame>           <f-t>          </f-t>          <f-l>

</f-l>          <div class="any-picture"></div>          <f-r>

</f-r>          <f-b>         </f-b>          </picture-frame>

而且，只要你有width、height 和frameWidth，这里有一个SCSS 助手：

$iWidth: 200px;
$iHeight: 150px;
$fWidth: 80px;
.any-picture {
  width: $iWidth;
  height: $iHeight;
  padding: $fWidth;
  background-clip: content-box;
}

picture-frame {
  position: relative;
  display: inline-block;
  f-t,f-b,f-r,f-l {
    position: absolute;
    background-image: url(https://image.ibb.co/e5Kaw7/image.png);
    background-size: contain;
    height: $fWidth;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - #{$fWidth}) 100%, $fWidth 100%);
    display: block;
  }
  f-r,f-l {
    bottom: -$fWidth;
    width: $iHeight + 2*$fWidth;
  }
  f-r {
    transform: rotate(90deg);
    transform-origin: top right;
    right: 0;
  }
  f-l {
    transform: rotate(-90deg);
    left: 0;
    transform-origin: top left;
  }
  f-b {
    transform: rotate(180deg);
    bottom: 0;
  }
}

https://jsfiddle.net/websiter/a7xLjLu8/

要动态地做到这一点，可以使用 CSS var(--iables)

body { margin-bottom: 0;}
:root {
  --img-width: calc(100vw - 146px);
  --img-height: calc(100vh - 146px);
  --frm-width: 65px;
  --img-bg: #BADA55;
  --frm-bg: #20180e;
}

.any-picture {
  width: var(--img-width);
  height: var(--img-height);
  padding: var(--frm-width);
  background-color: var(--img-bg);
  background-clip: content-box;
}

picture-frame {
  position: relative;
  display: inline-block;
  background-color: var(--frm-bg);
}

picture-frame f-t,
picture-frame f-b,
picture-frame f-r,
picture-frame f-l {
  position: absolute;
  background-image: url(https://image.ibb.co/e5Kaw7/image.png);
  background-size: contain;
  height: var(--frm-width);
  width: 100%;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--frm-width)) 100%, var(--frm-width) 100%);
  display: block;
}

picture-frame f-r,
picture-frame f-l {
  bottom: calc(var(--frm-width) * -1);
  width: calc(var(--img-height) + (2 * var(--frm-width)));
}

picture-frame f-r {
  transform: rotate(90deg);
  transform-origin: top right;
  right: 0;
}

picture-frame f-l {
  transform: rotate(-90deg);
  left: 0;
  transform-origin: top left;
}

picture-frame f-b {
  transform: rotate(180deg);
  bottom: 0;
}

<picture-frame>           <f-t>          </f-t>          <f-l>

</f-l>          <div class="any-picture"></div>          <f-r>

</f-r>          <f-b>         </f-b>          </picture-frame>

【讨论】：

太棒了！