如何使用CSS3实现折角效果

html-css028

如何使用CSS3实现折角效果,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body {

background-color: #eaf0f2

}

h1{text-align: center}

.box{width:500pxheight:300pxmargin:0 autoposition:relative}

.img-layer{position: absolutewidth: 500pxheight: 300pxtop: 0left: 0overflow: hidden}

.img-layer img {width: 500pxcursor: pointer}

.img-layer:before{ content: ''

position: absolute

top: 0

right: 0

width: 0

height: 0

border-style: solid

border-width: 0

border-color: rgba(0,0,0,0.2) #fff

border-radius: 0 0 0 4px

box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2)

-webkit-transition: all 0.4s ease-out

transition:all 0.4s ease-out}

.img-layer:hover:before{

border-right-width:100px

border-bottom-width:100px

}

</style>

</head>

<body>

<h1>折角效果</h1>

<div class="box">

<div class="img-layer">

<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">

</div>

</div>

</body>

</html>

来源于网络

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

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

直角切角

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

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

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

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

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

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

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