如何使用HTML和CSS制作一个div,其中包含一个被剪裁和屏蔽的图像,使其如下所示:
我一直试图找到一种方法来做这个约2个小时现在无处可去所以我只是希望有人可以指出我正确的方向。具体到这里,我希望剪切图像使得顶部的两个角是圆形的,并将其嵌入具有四个圆角和1/4底部填充的div元素中,两个元素都被转换为使其看起来是右边缘离观众比离左边更远。
答案 0 :(得分:8)
为了创建这样的效果,图像保持不变,但外形具有这种透视效果,您可以使用类似于下面演示的内容。
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>
&#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);
)。
答案 1 :(得分:6)
这是我尝试使用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>