如何使用html和css裁剪和设计这些图像？
光流
我正在尝试模仿这种技术：
上方有3张不同的图像被裁剪并排列在相同的高度上。
我试图使用CSS蒙版来做到这一点，但我只得到了丑陋的结果。
有什么想法如何使用HTML / CSS实现这一目标吗？
马克·奥德（Marc Audet）
基本概念论证
考虑以下HTML：
<div class="main">
<img src="http://placekitten.com/1500/500">
<div class="lbg">
<img src="http://placekitten.com/750/500">
</div>
<div class="rbg">
<img src="http://placekitten.com/750/700">
</div>
</div>
和以下CSS：
div.main {
width: 600px;
border: 1px dotted blue;
overflow: hidden;
position: relative;
}
div.lbg {
width: 560px;
height: 360px;
position: absolute;
top: 0;
left: 0;
background-color: gray;
border: 10px solid white;
transform: translate(-250px,50px) rotate(45deg);
overflow: hidden;
}
div.rbg {
width: 560px;
height: 360px;
position: absolute;
top: 0;
right: 0;
background-color: gray;
border: 10px solid white;
transform: translate(290px,50px) rotate(-45deg);
overflow: hidden;
}
.main img {
height: 200px;
width: 600px;
display: block;
}
.lbg img {
width: auto;
height: 400px;
display: block;
transform: translate(-0px,-150px) rotate(-45deg);
}
.rbg img {
width: auto;
height: 350px;
display: block;
transform: translate(150px,-80px) rotate(45deg);
}
这个想法是使用来将较宽的主图像放置在父块容器中overflow: hidden。
在父块内，使用绝对定位将子图像放置在主图像上，然后使用CSS3变换旋转和平移图像以获得所需的效果。
诱使它沿一个方向旋转子块容器，然后反转其子图像上的旋转。
不用说，有一些工作可以使旋转角度和平移偏移恰到好处，但这是可行的。
我并没有做所有的数学运算来确切地得到您所需要的，但这应该可以使您继续前进。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用html和CSS裁剪和设计这些图像？
- 2
使用CSS调整大小和裁剪图像
- 3
在HTML5和CSS中调整和裁剪图像
- 4
使用HTML和CSS裁剪形状
- 5
如何仅使用 HTML 和 CSS 进行此设计
- 6
如何使用CSS裁剪图像
- 7
如何使用ImageMagic裁剪图像的左侧和右侧
- 8
如何使用PDFlib精确放置裁剪和调整大小的图像？
- 9
如何使用tensorflow对图像进行分类和裁剪？
- 10
如何使用HTML和/或CSS按比例缩小大图像
- 11
如何使用CSS，JavaScript和HTML制作旋转的BG图像？
- 12
如何使用CSS，JS和图像调用HTML文件？
- 13
如何使用HTML和CSS创建3列图像网格？
- 14
如何使用嵌入的 css、图像和 javascript 打印 html 内容？
- 15
如何缩放，旋转和裁剪图像
- 16
如何缩放，旋转和裁剪图像
- 17
使用画布旋转和裁剪图像
- 18
使用 ImageJ 调整和裁剪图像
- 19
使用 graphicsmagick 调整大小和裁剪图像
- 20
HTML / CSS裁剪图像
- 21
旋转和裁剪图像
- 22
缩放和裁剪图像
- 23
如何使用 HTML 和 CSS 实现这些类型的样式（如下图所示）
- 24
使用OpenCV，我如何基于x和y坐标裁剪图像，并允许x和y坐标成为裁剪中心？
- 25
使用HTML和CSS修复图像网格
- 26
使用CSS和HTML堆叠图像
- 27
使用CSS裁剪图像
- 28
使用CSS旋转和裁剪svg背景
- 29
如何使这些链接和图像内嵌显示
我来说两句