倾斜和改变图像的视角及其边界从一个方向到另一个方向答案

【问题标题】：skew and change perspective of image and its border going from one direction to another倾斜和改变图像的视角及其边界从一个方向到另一个方向
【发布时间】：2015-10-06 17:00:44
【问题描述】：

我想从一个方向到另一个方向倾斜和改变图像的视角（从顶部和底部的高度）。我不是 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 的任何东西都很好

我浏览了很多链接，下面谷歌的不同搜索词值得一提：

*请丢弃此示例图像中颜色和滚动条的差异。这只是一个解释结果的例子。

【问题讨论】：

标签： html css

【解决方案1】：

今天我偶然发现了这篇文章https://viget.com/inspire/angled-edges-with-css-masks-and-transforms，它似乎完成了我一直在寻找的任务（我已经继续使用图像解决方案，但只是将其粘贴在这里供其他人使用），可以在https://savingplaces.org/上找到实时示例

【讨论】：