css3 做菱形

最新推荐文章于 2023-10-23 16:29:12 发布

weixin_30606461

最新推荐文章于 2023-10-23 16:29:12 发布

阅读量166

点赞数

原文链接：http://www.cnblogs.com/lily2015/p/4661920.html

版权

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>css3 做菱形</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery-1.10.2.js"></script>
<style>
.demo{
width: 100px;
height: 100px;
background:#eef2f3;
margin: 50px;
overflow: hidden;
}
.padding-box{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.a1{
width: 100px;
height: 100px;
overflow: hidden;
background:url(images/3.jpg) no-repeat;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>

</head>
<body>
<div class="demo padding-box">
<div class="a1"></div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/lily2015/p/4661920.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30606461

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 做菱形

<!DOCTYPE html><head><meta charset="utf-8" /><title>css3 做菱形</title><meta name="description" content="" /><meta name="keywords" content="" /><script src="j...
复制链接

扫一扫