CSS一張圖片怎么變成L

在CSS中，將一張圖片變成L形狀，可以通過使用CSS的變換（transform）屬性和過渡（transition）屬性來實現(xiàn)，以下是一個簡單的示例代碼：

HTML代碼：

<div class="image-l">
  <img src="image.png" alt="圖片">
</div>

CSS代碼：

.image-l {
  position: relative;
  width: 200px;
  height: 200px;
}
.image-l img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transition: transform 1s ease-in-out;
}
.image-l:hover img {
  transform: rotate(45deg);
}

在這個示例中，我們創(chuàng)建了一個名為.image-l的類，用于包裹圖片，我們將圖片設(shè)置為***定位，并使其旋轉(zhuǎn)-45度，當(dāng)鼠標(biāo)懸停在圖片上時，圖片會平滑地旋轉(zhuǎn)到45度，這是通過transition屬性實現(xiàn)的，它指定了變換的持續(xù)時間和平滑方式。

這只是一個簡單的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化，確保你的圖片文件路徑正確，并且圖片的尺寸與你的容器尺寸相匹配。