如何在图像的两个半边上获得渐变边框，如附图所示

Question

My code:

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #000000; }.module-border-wrap { max-width: 320px; padding: 1rem; position: relative; background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%); padding: 6px; border-radius: 1.5rem 1.5rem 0 1.5rem; }.module { background: #ffffff; color: #000000; padding: 2rem; border-radius: 1.5rem 1.5rem 0 1.5rem; }.w-100{ width:100; }.p-0{ padding:0; }.relative{ position: relative; }.curved{ border-radius: 30px 30px 0 30px; }

 <div class="module-border-wrap"> <div class="module p-0 relative curved"> <img src="https://picsum.photos/300/200" class="w-100 curved" alt=""> </div> </div>

So far, I am able to get the gradient, however, its showing outside of image, unlike in the attached screenshot, where the gradient border is over the image itself.

jsfiddle

Answer 1

You can try using one pseudo element and multiple backgrounds

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #000000; }.box { border-radius: 1.5rem 1.5rem 0 1.5rem; overflow: hidden; display: flex; position: relative; }.box:before { content:""; position:absolute; inset: 0; --g: #0000 1.8rem,#21bae3; /* update the color here */ --t: 10px; /* the thickness of the gradient */ background: linear-gradient( 90deg,var(--g)) bottom/100% var(--t), linear-gradient(180deg,var(--g)) right /var(--t) 100%; background-repeat: no-repeat; }

 <div class="box"> <img src="https://picsum.photos/300/200" > </div>