当前位置： 首页 > news >正文

CSS实现平行四边形

news 2026/2/9 13:00:00

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>

其实就是借助CSS中的transform来帮助我们拉升盒子，完成类似于平行四边形的内容 

相关文章：

CSS实现平行四边形

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

编程日记 2024/1/20 6:34:09

第11章 GUI Page500~504 步骤三十二：打开画板文件02

各个图元类新增GetTypeName_Static()&#xff0c;并将原来的GetTypeName()改为调用静态方法实现&#xff1a; 直线&#xff1a; 圆&#xff1a; 十字&#xff1a; 矩形&#xff1a; 文字&#xff1a; tool_4_save_load.hpp添加两行 tool_4_save_load.cpp增加&#xff1a; 增加…...

编程日记 2024/1/20 6:33:08

【ROS2】ROS2使用C++实现简单服务端

使用ROS2实现简单的服务端，功能为将客户端提供的两个数相加后返回给客户端。 代码如下： #include "rclcpp/rclcpp.hpp" #include "std_msgs/msg/string.hpp" #include "base_interfaces_demo/msg/student.hpp" #include "base_interfac…...

编程日记 2024/1/20 6:31:06

WAF攻防相关知识点总结1--信息收集中的WAF触发及解决方案

什么是WAF WAF可以通过对Web应用程序的流量进行过滤和监控&#xff0c;识别并阻止潜在的安全威胁。WAF可以检测Web应用程序中的各种攻击&#xff0c;例如SQL注入、跨站点脚本攻击&#xff08;XSS&#xff09;、跨站请求伪造&#xff08;CSRF&#xff09;等&#xff0c;并采取相…...

编程日记 2024/1/20 6:30:05

行云部署前端架构解析-前言 | 京东云技术团队

一个简单的自我介绍 项目规模 截止目前上万次代码提交&#xff0c;总代码行数1超过21万行&#xff0c;其中人工维护的代码超过 13万行&#xff0c;近千个文件。 前端线上服务直接对接的后端服务&#xff0c;达十多个。 跟很多应用一样, 它有行云的入口, 也有独立的服务, 还…...

编程日记 2024/1/20 6:23:59

git提交代码到远端仓库的方法详解

一、何为git git就是版本控制器&#xff0c;就比如说你新建了一个git文件夹&#xff0c;里面用于存放你的C语言实习报告&#xff0c;现在要用git对该文件夹进行接管。当你修改了你的C语言实习报告点击保存之后&#xff0c;就用git的相关命令&#xff0c;提交给git&#xff0c;让…...

编程日记 2024/1/20 6:22:59

基于网络爬虫的天气数据分析

二、网络爬虫设计 网络爬虫原理 网络爬虫是一种自动化程序&#xff0c;用于从互联网上获取数据。其工作原理可以分为以下几个步骤&#xff1a; 定义起始点&#xff1a;网络爬虫首先需要定义一个或多个起始点&#xff08;URL&#xff09;&#xff0c;从这些起始点开始抓取数据…...

编程日记 2024/1/20 6:21:57

Javaweb之SpringBootWeb案例员工管理之删除员工的详细解析

3.3 删除员工 查询员完成之后&#xff0c;我们继续开发新的功能&#xff1a;删除员工。 3.3.1 需求 当我们勾选列表前面的复选框&#xff0c;然后点击 "批量删除" 按钮&#xff0c;就可以将这一批次的员工信息删除掉了。也可以只勾选一个复选框&#xff0c;仅删除一…...

编程日记 2024/1/20 6:18:54

写点东西《什么是网络抓取？》

写点东西《什么是网络抓取&#xff1f;》 什么是网络抓取&#xff1f; 网络抓取合法吗&#xff1f; 什么是网络爬虫&#xff0c;它是如何工作的&#xff1f; 网络爬虫示例 网络抓取工具 结论 您是否曾经想同时比较多个网站上同一件商品的价格&#xff1f;或者自动提取您最喜欢的…...

编程日记 2024/1/20 6:17:53

使用C#操作文件：一个实际案例——替换文件中的IP地址

标题&#xff1a; 使用C#操作文件&#xff1a;一个实际案例——替换文件中的IP地址 介绍&#xff1a; 欢迎阅读我的最新博客&#xff01;今天&#xff0c;我们将探讨如何使用C#来处理一个实际的编程挑战&#xff1a;读取一个配置文件并替换其中的IP地址。这是一个非常常见的…...

编程日记 2024/1/20 6:14:50

Zookeeper简介

系列文章目录 Zookeeper安装教程 目录 一、Zookeeper简介 二、Zookeeper的数据结构 三、CPA理论 四、BASE 理论 五、ZooKeeper的特性 前言 这是我的学习笔记&#xff0c;以便后面翻阅。 一、Zookeeper简介 ZooKeeper是一个分布式的、开放源码的分布式应用程序协调服务&a…...

编程日记 2024/1/20 6:11:47

第33集《佛法修学概要》

请大家打开讲义第八十七页。我们讲到六度法门&#xff0c;这是菩萨道的六度。 佛教的修学&#xff0c;从浅入深&#xff0c;大致上可以分成三个主要的次第&#xff1a; 我们刚开始修学佛法的时候&#xff0c;第一个修学的重点&#xff0c;叫作“见山是山&#xff0c;见水是水…...

编程日记 2024/1/20 5:59:32

C++ 之LeetCode刷题记录（十三）

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可…...

编程日记 2024/1/20 5:56:29

容器技术1-容器与镜像简介

目录 1、容器与虚拟化 2、容器发展历程 3、镜像简介 4、镜像原理 &#xff08;1&#xff09;分层存储 &#xff08;2&#xff09;写时复制 &#xff08;3&#xff09;内容寻址 &#xff08;4&#xff09;联合挂载 1、容器与虚拟化 容器技术在操作系统层面实现了对计算机…...

编程日记 2024/1/20 5:50:23

openssl3.2 - 官方demo学习 - smime - smdec.c

文章目录 openssl3.2 - 官方demo学习 - smime - smdec.c概述笔记END openssl3.2 - 官方demo学习 - smime - smdec.c 概述 从pem证书中得到x509*和私钥, 用私钥和证书解密MIME格式的PKCS7密文, 并保存解密后的明文 MIME的数据操作, 都是PKCS7相关的 笔记 /*! \file smdec.c …...

编程日记 2024/1/20 5:47:20

vue中改变v-html中包含body标签的样式修改方法

vue-改变body的css样式 beforeCreate() {document.querySelector(body).setAttribute(style, background-color:#f4f4f4; color:#666666;)}, beforeDestroy() {document.body.removeAttribute(style)},在方法里加这个 document.querySelector(body).setAttribute(style, backg…...

编程日记 2024/1/20 5:43:15

港科夜闻｜香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力&#xff0c;这种新型感测器阵列方法可能优化感测器阵列…...

编程日记 2024/1/20 5:42:14

线程池的简单介绍及使用

线程池 线程池的参数介绍拒绝策略 线程池的任务处理流程使用Executors创建常见的线程池 线程池的参数介绍 corePoolSize: (核心线程数)这是线程池中始终存在的线程数&#xff0c;即使这些线程处于空闲状态。maximumPoolSize:(最大线程数) 是线程池允许的最大线程数。keepAliveT…...

编程日记 2024/1/20 5:40:12

使用Python的pygame库实现下雪的效果

使用Python的pygame库实现下雪的效果 关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 先给出效果图&#xff1a; 源码如下&#xff1a; import pygame import random# 初始化pygame pygame.init()# 设置屏幕尺寸 width…...

编程日记 2024/1/20 5:39:11

qt学习：进度条，水平滑动条，垂直滑动条+rgb调试实战

目录 水平滑动条&#xff0c;垂直滑动条 常用信号 进度条 常用信号 修改进度条 例子 rgb调色 配置ui界面 编写3个进度条的事件函数 添加链表容器和按钮索引 在.h里的类定义 初始化链表容器和按钮索引 编写添加颜色的按钮点击事件函数 效果 水平滑动条&#xff0c…...

编程日记 2024/1/20 5:38:10

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2026/2/5 4:25:58

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13