Nov 20, 2022

# Solution 1 :

In this case you can simply adjust the clip-path to keep the outline visible. Use the one in the first snippet of the previous question

.box {
--x: 10px;
--y: 30px;

clip-path: polygon(0 var(--x), var(--y) 0,
100% 0, 100% 100%,
var(--y) 100%, 0 calc(100% - var(--x)));
margin: 30px;
transform-origin: left;
transform: perspective(1000px) rotateY(35deg);
outline: var(--y) solid rgba(0, 0, 0, 1);
outline-offset: calc(-1*var(--y));

}
<img src="https://picsum.photos/id/1015/728/600"  class="box">

Or like below to have a more realistic frame:

.box {
--x: 10px;
--y: 30px;
--o:10px;

clip-path:polygon(
0 calc(var(--x) + var(--y)),var(--y) var(--y),
calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),
var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
margin: 30px;
transform-origin: left;
transform: perspective(1000px) rotateY(35deg);
outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1);
outline-offset: calc(-1*(var(--y) + var(--o)));

}
<img src="https://picsum.photos/id/1015/728/600"  class="box">

# Problem :

From an image I have to show it as a painting and also put a frame on it (all this with a 3D perspective).
This is how the image should look, like a painting:

This is how it should look with the frame:

Here is the code I have, so far only the part that looks like a picture.

.sh {
--valorshadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
}

.box {
--x: 10px;
--y: 30px;
clip-path: polygon( 0 calc(var(--x) + var(--y)), var(--y) var(--y), calc(100% - var(--y)) var(--y), calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)), 0 calc(100% - var(--x) - var(--y)));
margin: 30px;
transform-origin: left;
transform: perspective(1000px) rotateY(35deg);
outline: var(--y) solid rgba(0, 0, 0, 0.4);
outline-offset: calc(-1*var(--y));
}
<div class="sh">
<img src="https://c4.wallpaperflare.com/wallpaper/391/773/307/art-artistic-artwork-creative-wallpaper-preview.jpg" class="box">
</div>

How can I make the frame and make it look with a 3D perspective?

### Comment posted by Yamile

@TemaniAfif We are 2 people, it is a teamwork of the school, it is a database assaigment, but we do not know much about html and css so we are having difficulties doing the visual part of the project. We have to do like a small art store, when the other girl doing the project told me that you answered the question, I also wanted to upload this question to see if there was luck. Hope so. Thanks for answering the previous question. ðŸ™‚

### Comment posted by jsfiddle.net/ob3nxph1

is this what you want:

### Comment posted by Yamile

@TemaniAfif Yes, just that, thank you very very very much. Really thanks.