Saya punya gambar dan saya ingin membuatnya terlihat seperti 3D. Seharusnya terlihat seperti ini: Bagaimana saya bisa melakukan ini? Saya mencoba box-shadow tetapi tidak terlihat seperti 3d nyata.

1
Alex 6 April 2021, 02:22

2 jawaban

Jawaban Terbaik

Perbatasan dengan gradien dapat melakukannya:

img {
  border-style: solid;
  border-width: 0px 15px 15px 0px;
  border-image-slice: 0 15 15 0; /* same as border-width*/
  border-image-source: linear-gradient(45deg, transparent 10px, grey 0 calc(100% - 10px), transparent 0);
}

body {
  background: pink;
}
<img src="https://picsum.photos/id/1069/300/200">

Seperti di bawah ini jika Anda ingin warna yang berbeda untuk rendering 3D yang lebih baik:

img {
  --t:15px;
  border-right: var(--t) solid grey;
  border-bottom:var(--t) solid #626161;
  clip-path:polygon(0 0,calc(100% - var(--t)) 0,100% var(--t),100% 100%,var(--t) 100%,0 calc(100% - var(--t)));
}

body {
  background: pink;
}
<img src="https://picsum.photos/id/1069/300/200">
1
Temani Afif 5 April 2021, 23:30

Ini adalah pendekatan lain: gunakan before dan after elemen pseudo dengan transformasi.

.whatever
{
  display: block;
  width: 100px;
  height: 100px;
  background: url("https://picsum.photos/100/100");
}

.whatever::before
{
  content:"";
  background-color: gray;
  position:relative;
  display: block;
  transform: skewX(45deg);
  top: 100px;
  left: 5px;
  width: 100px;
  height: 10px;
}

.whatever::after
{
  content:"";
  background-color: gray;
  position:relative;
  display: block;
  transform: skewY(45deg);
  left: 100px;
  top: -4px;
  width: 10px;
  height: 100px;
}
<div class="whatever"></div>
1
Theraot 5 April 2021, 23:42