Applying Background Image to shape

Question

I'm working on a small web project and I'm currently trying to show a background image as a shaped object. Is it possible to display a regular square background image as a transformed shape like in the image below?

I tried to rotate a div, but then the image itself would be rotated as well.

What are other options that could help me archive an effect like in the image using html/css or js?

Thank you very much in advance.

you can refer here: https://stackoverflow.com/questions/8395784/applying-background-image-to-a-shape/18342177 — gretal, Nov 15 '21 at 07:39
use two layers (divs). front layers will have white colored data with css angled sided. other background will be 30% based on front layer bottom visible area. — Rafee, Nov 15 '21 at 07:41

score 1 · Accepted Answer · answered Nov 15 '21 at 07:43

1

You can use clip-path in css to build custom shapes. Use this website from Benett Feely as a cheatsheet.

article {
  width: 30vw;
  height: 100vh;
  margin-left: auto;
  background: url(https://picsum.photos/200) center/cover no-repeat;
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

<article></article>

answered Nov 15 '21 at 07:43

Amini

1,620
1
8
26

You can also use `before after` in a other way if you don't want to use *clip-path*. – Amini Nov 15 '21 at 07:44
that's an amazing resource. Helps a ton and didn't even knew about `clip-path` thank you Amirreza. – lechnerio Nov 15 '21 at 07:46
1

unfortunately still on the time lock but sure will - thanks again mate. have a good day :) – lechnerio Nov 15 '21 at 07:50

Applying Background Image to shape

1 Answers1