效果图
方法一:使用转换中的倾斜转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 300px; height: 260px;
margin: 100px auto; border-radius: 10px;
box-shadow: 0 0 3px #ccc; overflow: hidden;
position: relative;
}
.box img{
width: 300px; height: 230px;
}