HTML 显示梯形图片

yangyulinit

已于 2022-04-01 15:43:45 修改

阅读量481

点赞数

分类专栏： css3 文章标签：梯形图片 HMTL

于 2017-11-09 12:02:56 首次发布

本文链接：https://blog.csdn.net/yangyulinit/article/details/78488097

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 显示梯形图片

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
		<title>skew test</title>
		<style type="text/css">
			html,
			body,
			div,
			img {
				margin: 0;
				padding: 0;
			}
			
			img {
				border: 0 none;
			}
			.p1 {
				width: 1000px;
				height: 400px;
				padding-left: 0px;
				margin-left: 180px;
				float: left;
				transform: skew(-20deg, 0deg);
				overflow: hidden;
			}
			
			.p2 {
				width: 500px;
				height: 400px;
				margin-left: -168px;
				background-color: royalblue;
				transform: skew(40deg, 0deg);
				overflow: hidden;
			}
			
			.p2 img {
				transform: skew(-23deg, 0deg);
			}
		</style>
	</head>
	<body>
		<div class="p1">
			<div class="p2">
				<img width="150%" src="p.jpg"/>
			</div>
		</div>
	</body>
</html>

主要原理是通过将两个div倾斜在最里面的div放上图片，调整图片的位置，溢出部分不显示。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yangyulinit

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 显示梯形图片

HTML 显示梯形图片<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>skew test</title> <style type="text/css"> h
复制链接

扫一扫