當初為蜂巢樣式實驗過的方法
阿新 • • 發佈:2019-01-29
---恢復內容開始---
公司有個同事調侃說,我們公司的設計那麼有風格,一看就是我們公司做的,於是乎老大說,那麼我們來做點不一樣的吧
這便開始了我與蜂巢樣式相愛相殺的故事......
蜂巢樣式,也就是六邊形,包括正六邊形和非正六邊形,帶邊框的,帶陰影的,可連結的,點選範圍正確的,尖角朝上的...
以下方法都是需要 .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>
缺點:正六邊形難搞,元素寬度不得超過圖片寬度,點選範圍不對,影象可能有噪點
需求是無窮的,程式也是無限量的