把一张图片裁剪成菱形图片
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- </head>
- <style type="text/CSS">
- .picture{
- margin: 20px;
- display: inline-block;
- height: 200px;
- width:200px;
- transform: rotate(45deg);
- overflow: hidden;
- }
- .picture img{
- width: 200px;
- height: 200px;
- transform: rotate(-45deg) scale(1.5);
- }
- </style>
- <body>
- <div class="picture">
- <img src="http://csssecrets.io/images/adamcatlace.jpg" alt="">
- </div>
- </body>
- </html>
方案 2 裁剪路径方案
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- </head>
- <style type="text/css">
- img {
- max-width: 250px;
- margin: 20px;
- -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
- clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
- transition:1s;
- }
- img:hover {
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
- }
- </style>
- <body>
- <img src="http://csssecrets.io/images/adamcatlace.jpg" alt="">
- </body>
- </html>
来源: http://www.qdfuns.com/article/44439/374a4a7a92096f7fa469a526eaa7afe4.html