【CSS】八边形

微信订阅号：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】平行四边形