我想要添加到Lloan的答案中：如果你想讓圖像保持原有的方向并簡(jiǎn)單地從它們中切出鉆石形狀,你需要做的事情略有不同.

在下面的示例中,square是可見的菱形. Pic嵌套在那里,因此’square’可以正確地切除所使用圖像的邊緣.這樣,我們可以將“正方形”旋轉(zhuǎn)為菱形,并將圖片旋轉(zhuǎn)回原始方向.

body {

/* To show the background color is no problem here */

background-color: #efefef;

}

.square {

width: 100px;

height: 100px;

margin: 25px;

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

overflow: hidden;

}

.pic {

background: url(http://placekitten.com/g/150/150);

width: 150px;

height: 150px;

margin: -25px;

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

總結(jié)

以上是生活随笔為你收集整理的html图片做成菱形,html – 使用css创建菱形叠加图像的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。