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)));
-webkit-mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
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">
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);
filter: drop-shadow(var(--valorshadow));
}
.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?
@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. 🙂
@TemaniAfif Yes, just that, thank you very very very much. Really thanks.
