Поместить изображение внутри базовой трапеции с помощью чистого CSS?

Question

Есть ли способ поместить изображение сверху внутри красной области снизу?

Я пробовал разные комбинации, но безуспешно.

Не могли бы вы предоставить 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 раза (для каждого края). Но если бы я знал, как сделать это для верхнего края, я мог бы сделать это для остальных.

Спасибо!

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

<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:

$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>