微信訂閱號：rabbit_svip

做八邊形效果，也是像【CSS】平行四邊形 這個筆記里講的那樣，用transform屬性，旋轉內容。

微信訂閱號：rabbit_svip

HTML代碼

<figure>
    <img src="images/timg5.jpg" alt="">
</figure>

CSS代碼

figure {
    width: 300px;
    height: 300px;
    transform: rotate(45deg);
    overflow: hidden;
}
img {
    width: 300px;
    height: 300px;
    transform: rotate(-45deg);
}

HTML5提供了一個語義標簽<figure>，把<img>放在<figure>里面是一個正常的邏輯。

所以這里可以很粗暴的用【CSS】平行四邊形 里的方法1，先旋轉外層容器，再反旋轉圖片。

前提是外層的容器（這里指<figure>）要設置**overflow:hidden **， 這樣，圖片反旋轉之后，超出容器的部分就會被隱藏掉，從而實現八邊形效果。

HTML與CSS 目錄：HTML與CSS

上一篇：【CSS】平行四邊形