0
我想倾斜和改变图像的角度（从顶部和底部的高度）从一个方向到另一个。我不是100％确定如果我正在使用正确的术语，但下面的例子应该解释我正在努力实现的目标。歪斜和改变图像的角度和它的边界从一个方向到另一个
与边框图像的例子： 
它应该出现在我的网页上示例*： 
或者从基准问题的另一个例子 
这是什么我试过
- 获取最终图像并按原样使用，但问题在于宽度更改时图像质量下降。
- 一束CSS选择http://jsfiddle.net/6ksayLx8/
/*Attempt 1*/
#box {
width: 200px;
height: 200px;
/*background-color:green;*/
position: relative;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#box:after, #box:before {
display: block;
content:"\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
}
/*Attempt 2*/
.skew {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/* the magic ingredient */
-webkit-transform: skew(-16deg, 0);
-moz-transform: skew(-16deg, 0);
-ms-transform: skew(-16deg, 0);
-o-transform: skew(-16deg, 0);
transform: skew(-16deg, 0);
overflow: hidden;
width: 300px;
height: 260px;
position: relative;
left: 50px;
border: 1px solid #666;
}
.skew img {
-moz-transform: skew(16deg, 0);
-ms-transform: skew(16deg, 0);
-o-transform: skew(16deg, 0);
-webkit-transform: skew(16deg, 0);
transform: skew(16deg, 0);
position: relative;
left: -40px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="box">
<img src="http://placehold.it/560x366" class="img-responsive">
</div>
</div>
<div class="col-xs-6">
<div class="skew">
<img src="http://placehold.it/560x366" class="img-responsive">
</div>
</div>
</div>
</div>其他详情：
- 网站使用Bootstrap3等解决方案应响应
- 图片必须有边界
- 我罚款不支持任何低于IE 9
我已经在谷歌走了直通环节多和不同的搜索词下面是值得提及：
*请放弃不同的此示例图像中的颜色和滚动条的颜色。这只是一个解释结果的例子。