Tip: you can modify some code before running
Css controls Image transparency code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http:///www.w3.org/1999/xhtml"><pead><meta http-equiv="content-type" content="text/html;charset=gb2312"><title>CSS effect</title><style type="text/css">. Perspective-outer {position: relative; width: 170px;/* width + distance of the effect element */height: 140px; /* the height of the effect element + distance */margin: 15px; float: left ;}. perspective-inner {border: 1px solid # f60; height: 118px; width: 148px; background-color: # fff ;}. perspective-r ,. perspective-B {position: absolute; width: 0; height: 0 ;}. perspective-r {right: 0; height: 100px;/* height of the effect element (120px)-(border-top: 20px) */border-left: 20px solid #000;/* right side distance */border-top: 20px solid # fff;/* bottom distance */z-index: 1000 ;}. perspective-B {bottom: 0; width: 150px;/* width of the outermost element (170px)-border-left */border-left: 20px solid # fff; border-top: 20px solid #000; z-index: 1500;}/* test-2 style */. test-2. perspective-r {height: 70px;/* the height of the outermost element (120px)-(border-top) */border-top: 50px solid # fff ;}. test-2. perspective-B {width: 120px;/* width of the outermost element (170px)-border-left */border-left: 50px solid # fff ;} /* test-3 style */. test-3. perspective-outer {width: 250px;/* width + distance of the effect element */height: 220px;/* height + distance of the effect element */}. test-3. perspective-r {border-left: 100px solid #000; border-top: 100px solid # fff ;}. test-3. perspective-B {border-top: 100px solid #000; border-left: 100px solid # fff ;}</style></pead><body><p>Test result 1</p><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><br clear="all" /><div class="test-2"><p>Test result-change angle</p><p>Modify. border-top and. the width value of border-left in perspective-B. The larger the value is, the larger the angle is. perspective-r height and. the width of perspective-B.</p><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--></div><br clear="all" /><div class="test-3"><p>Test result-change distance</p><p>Modify. border-left and. the width value of border-top in perspective-B. The larger the value is, the larger the distance is. perspective-outer width and height, and modify. the width of perspective-r and. the height of perspective-B.</p><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--><!--一个效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一个效果元素--></div></body></ptml>
Tip: you can modify some code before running
