如何剪辑和转换图像，添加圆角和透视？

Posted 2023-03-05

【中文标题】如何剪辑和转换图像，添加圆角和透视？

【英文标题】：How can I clip and transform an image, adding rounded corners and perspective?

【发布时间】：2016-05-01 20:21:59

【问题描述】：

如何使用 html 和 CSS 制作一个 div，其中包含一个图像，该图像被剪裁和遮罩，使其看起来如下所示：

我一直在尝试找到一种方法来做到这一点大约 2 个小时，但没有成功，所以我只是希望有人能指出我正确的方向。具体来说，我希望剪辑图像，使顶部两个角为圆形，并将其嵌入到具有四个圆角和 1/4 底部填充的 div 元素中，两个元素都经过转换，使其显示为右边缘距离观察者比左边更远。

【参考方案1】：

为了创建这样的效果，图像保持不变，但外形具有这种透视外观，您可以使用类似于下面的演示的东西。

div.inner /*gives top section effect, also crops the image*/
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px 20px 0 0;
  height: 200px;
  width: 300px;
  overflow: hidden;
  border: 10px solid red;
  transform: skewY(5deg);


.inner img /*removes transform skew from image*/
  transform: skewY(-5deg);
  transform-origin: top left;
  height:100%;width:100%;


.wrap 
  display: inline-block;
  height: 200px;
  width: 300px;
  position: relative;
  
  /*for demo only*/
  margin: 100px 100px;


.wrap:after  /*give bottom section the effect*/
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  height: 100%;
  width: calc(100% + 20px);
  transform: skewY(-10deg);
  transform-origin: bottom right;
  background: red;
  z-index: -1;
  border-radius: 20px;

<div class="wrap">
  <div class="inner">
    <img src="http://lorempixel.com/500/500" />
  </div>
</div>

为了创建效果，我不得不合并这个wrapper div。这允许使用伪元素（:after css）来生成形状的下部：

 +----------------------------+
 |                            |
 |                    _______/  <-- curved corner
 |             ------/
 |      ------/
 \-----/
   /\
    \_____ also curved corner

然后使用inner div 来生成形状的上半部分。使用skew 声明，形状允许与:after 元素相反，将红色形状的右侧向下移动。

overflow:hidden 确保图像的任何不适合此inner div 的部分都将被裁剪（border-radius:20px 20px 0 0; 确保只有上角受到影响）。

最后要注意的是.inner img css。由于我已经倾斜了.inner div，因此重要的是要“取消倾斜”图像，使其保持矩形形状。这就是为什么这里有一个“反偏斜”（transform: skewY(-5deg);）。

【参考方案2】：

这是我使用perspective 的尝试。

感谢@vals 指出perspective 可以用作transform 的一部分。

* 
  box-sizing: border-box;

figure 
  perspective: 1000px;
  width: 420px;
  margin: 5em auto;
  height: 350px;
  background: red;
  text-align: center;
  padding: 10px;
  border-radius: 25px;
  transform: perspective(1200px) rotateY(50deg);

img 
  border-radius: 20px 20px 0 0;

<figure>
  <img src="http://lorempixel.com/400/200/sports/1/"  />
</figure>

【讨论】：

你不需要包装器。设置变换：perspective(1000px) rotateY(50deg);在图本身上