需求跟我说,咱们要创新,想做一个蜂巢状的列表,年少无知的我竟然一口答应了,全然因为刚接触了 clip-path;
But,然而,不幸的是,这只是坎坷路途的开始....
clip-path 的教程很多了,在此就不赘述了,
比 clip: rect() 这个弃子不知道高级了多少倍,苦等多年用 CSS 玩 SVG 的感觉已经有了一丢丢(虽然还有很多没有)
两个参数,一个盒子范围(可选)和 一个剪切形状
/* 圆形 */
clip-path: padding-box circle(50px at 0 100px); /* padding-box 盒模式下剪切成中心在 0 100px,半径 50px 的圆 */
/* 多边形 */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* 正六边形 */
/* 椭圆 */
clip-path: ellipse(65px 30px at 125px 40px);
/* 方形 */
clip-path: inset(10px, 0, 10rem, 1em); /* 当时老诧异了,为什么 clip:rect() 不是这样算边界的 */
/* 圆角 */
clip-path: inset(10% 10% 10% 10% round 20%, 20%);
但兼容性就很尴尬了呀,基本只有 -webkit- 能玩了,
还好公司是做移动端的,测试大部分手机还没发现问题,但老版安卓和各大 app 里面的浏览器怎么样就很难说了...
虽然神奇的是点击范围也成了剪切后的范围,但依旧有些需求没法达成。(border-radius 可以用 polygon 搞)
比如 border, box-shadow 的效果不是想象中那样呀,子级或内部文本范围并非剪切范围 等
但需求还是要完成呀,真是需求和程序的千年虐恋...
后来又试了些办法...比如 SVG 的 <clipPath> 和 <mask>,border 等,都不能满足需求。
比如,点击范围,背景图不统一,没法加边框和阴影之类的。
现在使用的是三个 DIV 的旋转来构成,看一下这冗长的代码:
.comb {
position: relative;
}
.comb:before {
content: "";
padding-top: 86.602%;
display: block;
margin: 0 -14.433%;
}
.comb-shape {
position: absolute;
top: 0%;
bottom: 0%;
left: 25%;
right: 25%;
z-index: 1;
opacity: 0.9;
background-size: 0 0;
}
.comb-shape:hover {
opacity: 1;
}
.horn1, .center, .horn2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background-image: inherit;
overflow: hidden;
}
.center {
background-repeat: no-repeat;
background-position: center;
background-size: auto 120%;
}
.horn1, .horn2 {
background-size: 0 0;
}
.horn1 {
transform: rotate(60deg);
}
.horn2 {
transform: rotate(-60deg);
}
.horn1:before, .horn2:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
background-image: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: auto 120%;
}
.horn1:before {
transform: rotate(-60deg);
}
.horn2:before {
transform: rotate(60deg);
}
.border .center,
.border .horn1,
.border .horn2 {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
<div class="comb">
<div class="comb-shape" style="background-image: url(img/lake2.png);">
<a class="horn1" href="#"></a>
<a class="horn2" href="#"></a>
<a class="center" href="#"></a>
</div>
</div>
没办法了,先这样吧,现实都不美好,我对新世界充满了期待...