CSS实现平行四边形

离逝的枫

已于 2024-01-15 22:59:20 修改

阅读量882

点赞数 10

分类专栏： CSS JS 文章标签： css 前端

于 2024-01-15 22:57:44 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/135613080

版权

JS 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

1、为什么实现平行四边形

在日常开发过程中，有些时候我们可以会遇到一种情况，如可视化大屏中要求我们横线实现对应的进度条，但进度条的内容是由无数个平行四边形组装类似于进度条的形式，那么我们就需要使用CSS来进行对应的实现。

2、具体实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

.mian{

display: flex;

margin: 12px;

}

.item{

display: flex;

align-items: center;

gap: 2px;

margin: auto;

width: 240px;

height: 36px;

}

.itemshape{

width: 24px;

height: 12px;

background-color: red;

transform: skewX(-45deg);

}

</style>

<body>

<div class="main">

<div class="item"></div>

</div>

<script>

const item = document.querySelector(".item")

for (let index = 0; index < 20; index++) {

const element = document.createElement("div")

element.className = 'itemshape'

item.appendChild(element)

}

</script>

</body>

</html>