图片以六边形显示 - 学习笔记

六边形

今天看到别人分享的六边形学习 自己也试着做了一下

原理：

  • 图片旋转 transfrom：rotate（120deg）；
  • 溢出隐藏 overflow：hidden；

我们要用三层div来实现旋转效果

第一次 rotate（120deg） 第二次 rotate（-60deg） 第三次 rotate（-60deg）

此时 正好div归正 我们的图片放在第三层里面 第一层和第二层纯属是为了实现六边形的

图像剪切成六边形定有溢出的地方设置溢出隐藏 overflow：hidden

div的宽度必须满足4:5 不然得到的就不是六边形了

HTML 部分

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>六边形图片展示</title>
 6 <link href="css/index.css" rel="stylesheet" type="text/css">
 7 </head>
 8 <body>
 9 <!-- section 部分  container 容器 -->
10 <section class="container">
11  <div class="conbox-1">
12   <div class="conbox-2">
13    <div class="conbox-3">
14     <img src="images/a1.jpg">
15     <div>风景</div>
16    </div>
17   </div>
18  </div>
19  
20   <div class="conbox-1">
21   <div class="conbox-2">
22    <div class="conbox-3">
23     <img src="images/a2.jpg">
24     <div>风景</div>
25    </div>
26   </div>
27  </div>
28  
29   <div class="conbox-1">
30   <div class="conbox-2">
31    <div class="conbox-3">
32     <img src="images/a3.jpg">
33     <div>风景</div>
34    </div>
35   </div>
36  </div>
37  
38   <div class="conbox-1 margin-top margin-left">
39   <div class="conbox-2">
40    <div class="conbox-3">
41     <img src="images/a4.jpg">
42     <div>风景</div>
43    </div>
44   </div>
45  </div>
46  
47   <div class="conbox-1 margin-top">
48   <div class="conbox-2">
49    <div class="conbox-3">
50     <img src="images/a5.jpg">
51     <div>风景</div>
52    </div>
53   </div>
54  </div>
55 
56 </section>
57 </body>
58 </html>

CSS 部分

@charset "utf-8";
* {
    margin:0; /* 外边距 */
    padding:0; /* 内边距 */
}
body {
    background-color:#0F9; /* 背景颜色 */
}
.container {
    width:650px; /* 宽 */
    height:430px; /* 高 */
    margin:100px auto; /* 上外边距和下外边距100 左右边距自动 */
}
.conbox-1 {
    width:200px;
    height:250px;
    float:left; /* 左浮动 */
    margin-left:10px; /* 左边距10 */
    overflow:hidden; /* 溢出隐藏 */
    transform:rotate(120deg);
    /* 改变外形 旋转120deg */
}
.conbox-2 {
    width:100%;
    height:100%;
    overflow:hidden;
    transform:rotate(-60deg);
}
.conbox-3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform:rotate(-60deg);
    position: relative; /* 位置 ： 相对的 */
}
.conbox-3 > div { /* >div 表示 div是.conbox-3的直接子选择器 */
    width:100%;
    height:100%;
    position:absolute; /* 位置 ： 绝对的 */
    top:0;
    left:0;
    opacity:0; /* opacity 不透明的 */
    line-height:250px; /* 线高度 */
    text-align:center; /* 文本居中 */
    color:#0FF;
    cursor:pointer; /* 光标 ： 指针 */
    background:url(../images/s.png);
    /* 背景图片 */
    transition:opacity 0.3s;
    /* 过渡 ： 不透明度时间0.3s */
}
.conbox-3:hover > div {
    /* 当光标移入 不透明度改变为1 */
    opacity:1;
}
.margin-top {
    margin-top:-70px;
}
.margin-left {
    margin-left:115px;
}
.clear{
    clear: both;
}

此文到此结束

 

 

 

此文参考链接 http://doc.okbase.net/similar/archive/109640.html

posted @ 2017-05-25 18:18  唯爱小面包  阅读(485)  评论(0)  编辑  收藏  举报