html - 倾斜图像而不扭曲它
问题描述
我可以在不扭曲图像的情况下对图像进行此效果吗?我尝试了使用css的倾斜效果,但它以某种方式旋转图像并裁剪了一半,我希望它保持原样,大小相同,一切都保持原样,但边缘像附加的图像,这是我的代码:
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
<div class="skewed">
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>
解决方案
您可以使用clip-path
它来裁剪图像而不扭曲它。使用该polygon
函数,您可以通过提供单个角的 x,y 坐标列表来指定自定义形状。如果您使用相对单位(如%
.
img {
width: 25%; /* for demonstration purposes */
clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
好的
- 需要最少的代码(只有 1 条简单的 CSS 规则)
- 保持透明度(您可以设置任何背景)
- 响应式(您可以轻松缩放图像)
不太好
推荐阅读
- css - 这个非常规的 CSS 代码是什么意思?
- python - 如何在 python 中使用“if statements”替换 xml 行?
- excel - 如何计算另一个工作簿的张数
- javascript - Javascript 知道何时修改对象值
- python - 如何逐行加载镶木地板文件
- reactjs - 在 Formik 表单之外渲染 Formik 字段
- python - 循环遍历数据框字典
- node.js - Mongoose 私有集字段
- java - 如何修复 Android Studio 中的“无法解析符号“v7”错误
- c# - 我在 page_load 请求中的 aspx c# 始终是 GET,我该如何发布?