当初为蜂巢样式实验过的方法

---恢复内容开始---

公司有个同事调侃说，我们公司的设计那么有风格，一看就是我们公司做的，于是乎老大说，那么我们来做点不一样的吧

这便开始了我与蜂巢样式相爱相杀的故事......

 

蜂巢样式，也就是六边形，包括正六边形和非正六边形，带边框的，带阴影的，可链接的，点击范围正确的，尖角朝上的...

 

以下方法都是需要 .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 >
            <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>

缺点：正六边形难搞，元素宽度不得超过图片宽度，点击范围不对，图像可能有噪点

 

需求是无穷的，程序也是无限量的