css图片边角倾斜的文字描述:
html:
<div class=”book-recommend”>
<ul>
<li><a href=”/detail=398705811″><img src=’***.jpg’><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
<li><a href=”/detail=405458225″><img src=’***.jpg‘><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
<li><a href=”/detail=369029511″><img src=’***.jpg‘><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
</ul>
</div>
css:
.transparent {filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.bg-gray {background-color: #cccccc;}
.label-wrap {position: absolute;left: -60px;top: -60px;width: 100px;height: 100px;color: #fff;overflow: hidden;z-index: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.label-wrap span {display: block;width: 100%;background-color: red; position: absolute;bottom: 10px;left: 0;text-align: center;font-size:10px;}
.book-recommend ul{margin:20px 0 20px 0;}
.book-recommend ul li{display:inline-block;overflow:hidden;margin-right:10px;}
.book-recommend ul li a{display:block;position:relative;}
.book-recommend ul li a img{width:90px;height:auto;}