CSS3实现平行四边形间隔的边框

最新推荐文章于 2024-07-29 11:18:37 发布

djinzhong

最新推荐文章于 2024-07-29 11:18:37 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/djz917/article/details/84870334

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果如下：

其实要实现这个很简单，只需要配合一个CSS3的属性就能简单实现了。

transform: skewX()

定义沿着 X 轴的 2D 倾斜转换。

W3C案例地址

用好这个属性就简单许多了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平行四边形</title>
		<style type="text/css">
			.Parallelograms {
				width: 750px;
				height: 10px;
				background: #fff;
				font-size: 0px;
				overflow: hidden;
				white-space: nowrap;
			}
			.Parallelogram {
				display: inline-block;
				width: 70px;
				margin: 0 10px;
				height: 10px;
				background: #f58f8f;
				transform: skewX(-25deg);
			}
			.Parallelogram:nth-child(1) {
				margin-left: -45px;
			}
			.Parallelogram:nth-child(odd) {
				background: #8fc9f5;
			}
		</style>
	</head>
	<body>
		<div class="Parallelograms">
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
			<div class="Parallelogram"></div>
		</div>
	</body>
</html>