CODEWITHSUNDEEP
csshtml
davidesp
davidesp

Reputation: 3972

flipping an image horizontally with CSS

I'm trying to build a frame. I did the top edge properly, but when doing the left edge it doesn't output properly. The left edge is almost correct, I just need to flip it horizontally from its current position.

Could you flip it for me and provide me a working example on your answer (snippet preview) or JSFiddle?

.trapezoid-top {
  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%);
  transform-origin: top left;
  transform: rotate(0deg);
}
.trapezoid-left {
  width: 600px;
  height: 100px;
  margin-top: -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%);
  transform-origin: top left;
  transform: rotate(90deg);
}
<div style="margin:0 100px;">
  <div class="trapezoid-top"></div>
  <div class="trapezoid-left"></div>
</div>

Thanks!

Upvotes: 1

Views: 752

Answers (1)

K K
K K

Reputation: 18109

Try this:

CSS:

.container {
  position: relative;
  margin: 0 100px;
}

.trapezoid-top {
  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%);
  transform-origin: top left;
  transform: rotate(0deg);
}

.trapezoid-left {
  width: 600px;
  height: 100px;
  margin-top: -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%);
  transform-origin: top right;
  transform: rotate(-90deg);
  position: absolute;
  right: calc(100% - 16px);
}

HTML:

<div class="container">
  <div class="trapezoid-top"></div>
  <div class="trapezoid-left"></div>
</div>

Change transform-origin to top right and position the element to place it on left. Demo: http://jsfiddle.net/GCu2D/3568/

Upvotes: 2

Related Questions