CSS3六边形

浏览数：17 / 时间：2015年06月09日

<!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="./Document_files/wallhaven-131731.jpg">
</div>

<div class="avatar2 avatar">
  <img src="./Document_files/wallhaven-131731.jpg">
</div>

<div class="avatar3 avatar">
  <div class="avatar3-inner">
    <img src="./Document_files/wallhaven-131731.jpg">
  </div>
</div>


<div class="avatar3 avatar avatar4">
  <div class="avatar3-inner">
    <img src="./Document_files/wallhaven-131731.jpg">
  </div>
</div>
<script>

</script>

</body></html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS3六边形