当初为蜂巢样式实验过的方法
---恢复内容开始---
公司有个同事调侃说,我们公司的设计那么有风格,一看就是我们公司做的,于是乎老大说,那么我们来做点不一样的吧
这便开始了我与蜂巢样式相爱相杀的故事......
蜂巢样式,也就是六边形,包括正六边形和非正六边形,带边框的,带阴影的,可链接的,点击范围正确的,尖角朝上的...
以下方法都是需要 .comb 拥有宽度才能看到效果,所以请自行加上一小段 style
.comb { width: 100%; max-width: 250px; min-height: 1em; }
以下方法都有各自的不足,也都有内容范围和无法设置阴影方面的问题,
来一起看看吧...
1. 三个 div 旋转
.comb1 { position: relative; background-size: 0 0; background-position: center; } .comb1:before { content: ""; display: block; padding-top: 86.602%; } .comb1 > * { position: absolute; top: 0; bottom: 0; left: 25%; right: 25%; background: inherit; overflow: hidden; } .comb1 > .corner1 { transform: rotate(60deg); } .comb1 > .corner2 { transform: rotate(-60deg); } .comb1 > .corner1:after, .comb1 > .corner2:after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; right: -50%; background: inherit; background-size: auto 100%; } .comb1 > .corner1:after { transform: rotate(-60deg); } .comb1 > .corner2:after { transform: rotate(60deg); } .comb1 > .center { background-size: auto 100%; } .comb1.border > * { border: 2px solid #000; border-left: none; border-right: none; } </style>
<div class="comb border comb1" style="background-image: url(img/lake.png"> <a href="#" class="corner1"></a> <a href="#" class="corner2"></a> <a href="#" class="center">我是内容</a> </div>
缺点:修改成非正六边形非常麻烦,无意义 dom 太多,边框不得超过 2px,失去背景图的 cover 和 contain 功能
2. 大背景 :after
.comb2 { position: relative; overflow: hidden; padding: .5rem 1rem; } .comb2 > .comb-bg { position: absolute; z-index: -1; left: 14.6447%; right: 14.6447%; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transform-origin: center; transform-origin: center; background: #ddd; } .comb2 > .comb-bg:before { content: ""; display: block; padding-top: 100%; }
<div class="comb comb2"> <div class="comb-bg"></div> <span>我是内容</span> </div>
缺点:无法设置边框,点击范围不正确
3. clip-path
.comb3 { position: relative; -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .comb3 { text-align: center; } .comb3:before { content: ""; display: block; padding-top: 86.602%; } .comb3:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-clip-path: inherit; clip-path: inherit; background: #fff; } .comb3 > .comb-wrap { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; } .comb3.border { background: #aaa; } .comb3.border:after { margin: 5px; } .comb3.shadow { -webkit-filter: blur(3px); filter: blur(3px); }
<div class="comb comb3 border"> <div class="comb-wrap">我是内容</div> </div>
缺点:兼容性可能会出问题,点击范围不对
4. svg
.comb3 { position: relative; } .comb3:before { content: ""; display: block; padding-top: 86.602%; } .comb3 > svg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .rect_bg { clip-path: url(#rect); }
<svg width="0" height="0" viewBox="0 0 40 34.64"> <defs> <clipPath id="rect"> <path d="M10,0 L30,0 L40,17.32 L30,34.64 L10,34.64 L0,17.32 Z" /> </clipPath> </defs> </svg> <div class="wrap"> <div class="comb comb3"> <svg width="100%" viewBox="0 0 40 34.64" preserveAspectRatio="xMidYMax"> <a xlink:href="http://www.baidu.com"> <image class="rect_bg" width="40" height="40" xlink:href="../img/lake2.png"/> </a> </svg> </div> <div class="comb comb3"> <svg width="100%" viewBox="0 0 40 34.64" preserveAspectRatio="xMidYMax"> <a xlink:href="http://www.baidu.com"> <rect class="rect_bg" x="0" y="0" width="100%" height="100%"/> </a> </svg> </div> </div>
缺点:非正六边形难搞, 学习成本较高,包含的内容那就麻烦了
5. 用图片作背景
.comb5 { position: relative; } .comb5:before, .comb5:after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 50%; background-image: url(http://192.168.1.129/Content/img/comb.png); background-size: auto 400%; background-repeat: no-repeat; } .comb5:before { left: 0; } .comb5:after { right: 0; } .comb5.style1:before { background-position: 0 0; } .comb5.style1:after { background-position: 100% 0; } .comb5.style2:before { background-position: 0 33.333%; } .comb5.style2:after { background-position: 100% 33.333%; } .comb5.style3:before { background-position: 0 66.666%; } .comb5.style3:after { background-position: 100% 66.666%; } .comb5.style4:before { background-position: 0 100%; } .comb5.style4:after { background-position: 100% 100%; }
<div class="comb comb5 style1">我是内容</div> <div class="comb comb5 style2">我是内容</div> <div class="comb comb5 style3">我是内容</div> <div class="comb comb5 style4">我是内容</div>
缺点:正六边形难搞,元素宽度不得超过图片宽度,点击范围不对,图像可能有噪点
需求是无穷的,程序也是无限量的