如何使用CSS3实现折角效果

html-css015

如何使用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样式就可以做出随内容而变的圆角矩形了~（只能是单色的哦）

作用多了去了，例如常见的 :before、:after 伪类，经常被用来辅助生成一些装饰性的东西（折角、抬头、箭头等），能让你少写两层无意义的html标签，配合attr属性，可以动态显示content的值：

<div class="prog" data-pct="20"></div>

.prog:before {content:attr(data-pct) '%'} /* 拼接字符串，js的感觉有木有！ */

除此之外，还有 :first-child、:last-child、:nth-child(n)、:focus、:active等，筛选元素简直太方便了。