CSS3干货26：标签切角效果实现

今天有同学问我，网页中切角效果如何实现。如图所示：

我第一反应是：切图，或者 SVG。对于异形图片，这些方式做出来轻而易举。

同学回了一句：用 CSS 无法做到么？切图，SVG 感觉都太麻烦了。

-_-!!!

我的回答是：当然是可以的啦~

切角的关键，就是让一个角的边框消失。

1. 方法一

HTML

<div class="box">
    <p>这个是内容</p>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
.box{
    /* 关键：利用内部投影模拟边框 */
    box-shadow: 0 0  0  1px  #666 inset;
    width: 200px;
    height: 200px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative; /* 关键：相对定位 */
}
.box::after{
    display: inline-block;
    content: "";
    width: 100px;
    height: 100px;
    border-left:1px #666 solid; /* 关键：左边框，颜色跟 box 投影一样 */
    background: #f30; /* 改成 box 一样的背景色即可 */
    transform: rotate(45deg); /* 关键：绝对定位 */
    position: absolute; /* 关键：绝对定位 */
    right:-60px;
    bottom:-60px;
    z-index: 2;  /* 防止折角被覆盖 */
}

该方法主要就是利用了 伪标签，模拟切角，盖住div的右下角。

不过，用 div 的阴影来模拟边框效果，方便被伪标签覆盖。如果直接用 border，overflow 样式不会覆盖 div 的边框。

2. 方法二

这个方法还是要切片，不过只切切角部分。如图所示：

用这个图片覆盖 div 的对应的角就行。

HTML

<div class="box">
    <p>这个是内容</p>
    
    <span class="jiao"><img src="images/youxiajiao.png" alt=""></span>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
.box{
    /* 切图，可以用 border */
    border:  1px  #666 solid;
    width: 200px;
    height: 200px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    position: relative; /* 关键：相对定位 */
}
.jiao{
    display: inline-block;
    width: 33px;
    height: 33px;
    background: #fff; /* 改成 box 一样的背景色即可 */
    position: absolute; /* 关键：绝对定位 */
    /* 关键：把图片移出 box 范围一点，盖住 border */
    right:-1px;
    bottom:-1px;
    z-index: 2;  /* 防止折角被覆盖 */
}

小结

方法二跟方法一的思路类似，就是用切角覆盖某个角的边框。

如果有其他思路，大家可以留言讨论呀。