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