首页 > 代码库 > CSS3六边形
CSS3六边形
<!DOCTYPE html><!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>Document</title><style>.avatar { width: 100px; height: 86px; position: relative; overflow:hidden;}.avatar1:before { content: ""; position: absolute; top: 0px; right: 0; width: 50%; border-bottom: 43px solid transparent; border-left: 25px solid white; border-right: 25px solid white;}.avatar1:after { content: ""; position: absolute; bottom: 0px; width: 50%; right: 0; border-top: 43px solid transparent; border-left: 25px solid white; border-right: 25px solid white;}.avatar img{ width: 100%; height: 100%;}.avatar2:before { content: ""; position: absolute; top: 0px; right: 0; border-bottom: 29px solid transparent; border-left: 50px solid white; border-right: 50px solid white;}.avatar2 { height: 116px;}.avatar2:after { content: ""; position: absolute; bottom: 0px; right: 0; border-top: 29px solid transparent; border-left: 50px solid white; border-right: 50px solid white;}.avatar3{ height: 116px; transform: rotate(120deg);}.avatar3-inner{ overflow: hidden; width: 100%; height: 100%; transform: rotate(-60deg);}.avatar3 img{ transform: rotate(-60deg);}.avatar4{ height: 90px;}</style></head><body><div class="avatar1 avatar"> <img src="http://www.mamicode.com/Document_files/wallhaven-131731.jpg"></div><div class="avatar2 avatar"> <img src="http://www.mamicode.com/Document_files/wallhaven-131731.jpg"></div><div class="avatar3 avatar"> <div class="avatar3-inner"> <img src="http://www.mamicode.com/Document_files/wallhaven-131731.jpg"> </div></div><div class="avatar3 avatar avatar4"> <div class="avatar3-inner"> <img src="http://www.mamicode.com/Document_files/wallhaven-131731.jpg"> </div></div><script></script></body></html>
CSS3六边形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。