Question

我想倾斜并改变从一个方向到另一个方向的图像（从顶部和底部的高度）的视角。我不是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以外的任何内容。

我已通过许多链接，以下Google中的不同搜索字词值得一提：

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

Answer 1

今天我偶然发现了这篇文章https://viget.com/inspire/angled-edges-with-css-masks-and-transforms，它似乎完成了我正在寻找的任务（我已经开始使用图像解决方案，但只是将其粘贴在其他人身上）并且可以在{{ 3}}

歪斜并改变图像及其边界从一个方向到另一个方向的视角

1 个答案: