css写的梯形里面怎么放图片

看看下面这个代码是否符合要求：

<style>
pic {
   width:320px;
   height:240px;
   -webkit-clip-path: polygon(10% 0, 0 100%, 100% 100%, 90% 0);
   clip-path: polygon(10% 0, 0 100%, 100% 100%, 90% 0);
   overflow:hidden
}
pic img {
   height:100%
}
</style>
<div class=pic><img src="url自己填"/></div>

不过IE中无法实现

纯HTML是实现不了这种效果的，需要JS事件效果配合，给你一个案例吧，代码比较复杂

先看下效果图：

完整的 HTML代码：

<div class="lb_gl">
<div class="container">

<div class="pictureSlider poster-main">
<div class="poster-btn poster-prev-btn"></div>
<ul id="zturn" class="poster-list">
<li class="poster-item  zturn-item" >
<p class="xxgy">学员感言1</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a1png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言2</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a2png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言3</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a3png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item" >
<p class="xxgy">学员感言4</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a4png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a5png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item  zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a1png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a2png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a3png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a4png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/xueyuanpng" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a5png" width="100%">
<a href="#" class="in_page"><img src="images/iconinpng" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
</ul>
</div>
</div>

</div>

需要引入的css：

格式化样式css

body{font-family: microsoft yahei,Arial;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,ol,li,ul,p,dl,dt,dd{padding: 0;margin:0}
ul,ol,li,dl,dt,dd{text-decoration: none;list-style: none}
lf{float: left}
rt{float: right}
clear{clear:both}
ovh{overflow: hidden}
a{  color:#303030;  text-decoration:none;  }
a:hover{  text-decoration:none;  }
input{border:none;outline:none;}
img{border:none}

轮播效果css：

/轮播/
lb_gl{margin-bottom: 30px;background: url(/images/bg_3dpng);background-size: 100% 100%;height:725px ;}
container{width: 1024px;margin:0 auto;position: relative;}
pictureSlider{height: 518px;margin-bottom: 24px;}
poster-item{background: #fff;height: 453px;width:336px;border-radius: 10px;padding:45px 23px 20px 23px;
transition: all 05s;cursor: default;
-moz-transition: all 05s;cursor: default;
-webkit-transition: all 05s;cursor: default;
-o-transition: all 05s;cursor: default;
}
turn_3d{text-align: center;color: #fff;font-weight: 400;font-size: 36px;padding: 28px 0;}
xxgy{font-size: 30px;font-weight: 900;padding-left: 10px;}
poster-item say{font-size: 18px;margin-bottom: 5px;padding-left: 10px;}
students_star{padding:10px 10px 0 10px ;}
cell_list{margin-bottom: 20px;color:#999;font-size: 18px;overflow: hidden;}
darks{color: #000;padding-left: 10px;}
zwjs{border-top:1px solid #d0cddb;line-height: 26px;padding-top: 5px;color: #999;font-size: 12px;max-height: 84px;overflow: hidden;}
for_btn{position: relative;height:214px;overflow:hidden}
in_page{position: absolute;left: 50%;top:50%;width:40px;height: 40px;margin-left: -20px;margin-top: -20px;}
in_page>img{width: 40px;height: 40px;}
check_more{width: 180px;height: 50px;line-height: 50px;text-align: center;color:#fff;background: #bc241d;margin:0 auto;display: block;}

需要引入的JS：

轮播控制器JavaScript，这段js引入需要jQuery的支持，所以先引入它。

 (function(win,doc,undefined){
  var zturn=function(turn){
  thisturn=turn
  thiszturn=$("#"+turnid)
  thisX=0
  thiszturnitem=thiszturnchildren("zturn-item")
  thisnum_li=thiszturnitemlength//轮播元素个数 zturnPy为每个的偏移量
  thiszturnPy=turnAwidth/(thisnum_li-1)  
  thisinit()
  thisturn_()
  return this
  }
  zturnprototype={
  constructor:zturn,
   init:function(){
    var _self = this;
thiszturnchildren("zturn-item")each(function(index,element){  
//index是第几个元素 X是选取的中间数 num_li是总数
var rt=1//1:右侧：-1：左侧
if((index-_selfX)>_selfnum_li/2||(index-_selfX)<0&&(index-_selfX)>(-_selfnum_li/2)){rt=-1}//判断元素左侧还是右侧
var i=Mathabs(index-_selfX);//取绝对值
if(i>_selfnum_li/2){i=parseInt(_selfX)+parseInt(_selfnum_li)-index;}//i:是左或者右的第几个
if((index-_selfX)<(-_selfnum_li/2)){i=_selfnum_li+index-_selfX}
$(this)css({
'position':'absolute',
'left': '50%',
'margin-left':-_selfturnwidth/2+_selfzturnPyrti+"px",
'z-index':_selfnum_li-i, 
'opacity': Mathpow(_selfturnopacity,i),
'transform':'scale('+Mathpow(_selfturnscale,i)+')',
'-webkit-transform':'scale('+Mathpow(_selfturnscale,i)+')',
'-webkit-transform':'scale('+Mathpow(_selfturnscale,i)+')',
'-moz-transform':'scale('+Mathpow(_selfturnscale,i)+')',
'-ms-transform':'scale('+Mathpow(_selfturnscale,i)+')',
'-o-transform':'scale('+Mathpow(_selfturnscale,i)+')'
})
$(this)attr("data_n",index)
})
   },
   turn_:function(){
    var _self=this
    thiszturnitemclick(function(){  
    _selfX=$(this)attr("data_n")
    _selfinit()
    })
   },
   prev_:function(){
    var _self=this
    thisX--
if(thisX<0){thisX=thisnum_li-1}
    thisinit()
   },
  next_:function(){
    var _self=this
    thisX++
if(thisX>=thisnum_li){thisX=0}
    thisinit()
   }
  } 
  winzturn = zturn;
 }(window,document))

最后在线面加入最后一段js

var aa=new zturn({
id:"zturn",
opacity:09,
width:382,
Awidth:1024,
scale:09
})
var ab=new zturn({
id:"zturn2",
opacity:08,
width:382,
Awidth:1024,
scale:06
})

最后案例中的就不提供了

IE10以下不支持css3 transform属性。
ie的话是加上-ms-前缀，或者直接用标准模式。
比如： -ms-transform: skew(-45deg, 15deg) rotate3d(07, 08, 04, 55deg);
或者：transform: skew(-45deg, 15deg) rotate3d(07, 08, 04, 55deg);
都可以

首先你会用css画不规则图形，比如你的案例，先用css画出一个梯形，然后加入背景，然后再做个div定位，看起来就像立体的了，具体的网上有很多资料，我发个连接给你，你可以了解一下css如何画不规则图形的，你就明白很多了
>