试坑不完美的 clip-path （我说的 CSS 的那个）

需求跟我说，咱们要创新，想做一个蜂巢状的列表，年少无知的我竟然一口答应了，全然因为刚接触了 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>

 

没办法了，先这样吧，现实都不美好，我对新世界充满了期待...