Question

如何使用HTML和CSS制作一个div，其中包含一个被剪裁和屏蔽的图像，使其如下所示：

我一直试图找到一种方法来做这个约2个小时现在无处可去所以我只是希望有人可以指出我正确的方向。具体到这里，我希望剪切图像使得顶部的两个角是圆形的，并将其嵌入具有四个圆角和1/4底部填充的div元素中，两个元素都被转换为使其看起来是右边缘离观众比离左边更远。

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

为了创造效果，我不得不合并这个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);）。

Answer 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/" alt="" />
</figure>

如何剪切和变换图像，添加圆角和透视图？

2 个答案: