图片以六边形显示

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

news/2024/7/4 10:04:38

六边形

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

原理：

图片旋转 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

转载于:https://www.cnblogs.com/weiaixiaomianbao/p/6905334.html