---恢復內容開始---

公司有個同事調侃說，我們公司的設計那麼有風格，一看就是我們公司做的，於是乎老大說，那麼我們來做點不一樣的吧

這便開始了我與蜂巢樣式相愛相殺的故事......

蜂巢樣式，也就是六邊形，包括正六邊形和非正六邊形，帶邊框的，帶陰影的，可連結的，點選範圍正確的，尖角朝上的...

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

缺點：正六邊形難搞，元素寬度不得超過圖片寬度，點選範圍不對，影象可能有噪點

需求是無窮的，程式也是無限量的