如何使用CSS3实现折角效果

html-css017

如何使用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>

来源于网络

不知道LZ说的是哪一种折角矩形哦，最好贴个图上来看看，

不过一般就内容变化的矩形都是用CSS写出来的，现在CSS3已经有属性支持了，LZ可以学习下，要是用CSS2.0也是可以做到的，不过麻烦点~要用PS做四个圆角图片再加上CSS样式就可以做出随内容而变的圆角矩形了~（只能是单色的哦）