CSS3技巧之形状（切角效果）

html-css010

CSS3技巧之形状（切角效果）,第1张

上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。

实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景

直角切角

先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。

注：background: #58a不是必须的，加上它是为了将其作为回退机制。

实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。

依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。

好了，现在实现了。如果要四个角的话，就要四层渐变了。

就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！

可以利用 :before 伪类放一个蓝色的块上去，（看我头像）然后旋转到合适的角度和大小即可。

代码：

<div class="box">

<div class="item">首页</div>

<div class="item corner">查询订单</div>

</div>

<style>

* {

margin:0

padding: 0

}

html {

background: #aab

padding: 10px

}

.box {

height: 60px

line-height: 60px

background: #fff

overflow: hidden

}

.box .item {

float: left

vertical-align: middle

width: 300px

text-align: center

}

.box .item.corner {

background: #698ff4

color: #fff

position: relative

}

.box .item.corner:before {

display: block

content: ' '

width: 120px

height: 120px

position: absolute

left: -36px

top: 0

background: #698ff4

transform: rotate(-45deg)

}

</style>

1.使用渐变

因为渐变可以接受一个角度，比如45deg作为方向，而且色标的位置信息也可以是绝对的长度值，不受容器尺寸的影响。把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且颜色设置为想要的背景色。

4个切角，写几个 linear-gradient就是几个切角

2.使用clip-path

3.使用corner-shape

注：目前此方法还在测试中，还没有浏览器支持

【弧形切角（内凹圆角）】