admin 管理员组

文章数量: 1086866

css右上角倾斜封页角效果

效果如图：

第一种效果代码如下：

    <div class="box"><div class="box-con"><div class="box-text">昨日</div></div></div>​
  .box {width: 180px;height: 100px;background: white;border-radius: 10px;-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);position: relative;z-index: 90;}.box .box-con{width: 85px;height: 88px;overflow: hidden;position: absolute;top: -3px;right: -3px;}.box .box-text {color: white;text-align: center;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);position: relative;padding: 2px 0;left: 35px;top: 10px;width: 65px;background-color: #00801C;background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);}.box .box-text:before, .box-text:after {content: "";position: absolute;bottom: -3px;}.box .box-text:before {left: 0;}.box .box-text:after {right: 0;}

第二种效果代码如下：

 <div class="box"><div class="box-con"><span>第一条</span></div></div>
  .box{width:180px;height:100px;position:relative;background: pink;overflow: hidden;}.box .box-con{width:100px;height:100px;position: absolute;background: green;top:-50px;right:-50px;transform: rotate(45deg);}.box .box-con span{position: absolute;bottom:0;display: block;width:100px;text-align: center;}

 

本文标签： css右上角倾斜封页角效果

版权声明：本文标题：css右上角倾斜封页角效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699309891a341797.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。