使用纯CSS将图像放入基本梯形中？

Question

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

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

你能为JSFiddle提供一个有效的代码吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的目的是建立一个框架。所以我要做4次（每个边缘）。但是，如果我知道如何为最高优势做到这一点，我可以为其余部分做到这一点。

谢谢！

Answer 1

Head : T_Liste; Suivant : T_Liste := Liste; begin while Suivant /= null loop Suivant := Liste.Suivant; if Head = null or else Less_Than (Liste.Valeur, Head.Valeur) then Liste.Suivant := Head; Head := Liste; else declare Iter : T_Liste := Head; begin while Iter /= null loop if Iter.Suivant = null or else Less_Than (Liste.Valeur, Iter.Suivant.Valeur) then Liste.Suivant := Iter.Suivant; Iter.Suivant := Liste; exit; end if; Iter := Iter.Suivant; end loop; end; end if; Liste := Suivant; end loop; Liste := Head; 可能派上用场。

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

这是一个完整框架的尝试：

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

.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

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

要动态执行，可以使用CSS $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; } }

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