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

CSS实现平行四边形

news 2026/4/1 12:58:42

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

LogonTracer核心功能深度解析：4624、4625等关键事件ID的实战应用

LogonTracer核心功能深度解析&#xff1a;4624、4625等关键事件ID的实战应用 【免费下载链接】LogonTracer Investigate malicious Windows logon by visualizing and analyzing Windows event log 项目地址: https://gitcode.com/gh_mirrors/lo/LogonTracer LogonTrace…...

编程新知 2026/4/1 11:23:38

HoRain云--Vue3组件开发：从入门到精通的终极指南

&#x1f3ac; HoRain 云小助手&#xff1a;个人主页 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站&#xff0c;性价比超高&#xff0c;大内存超划算&#xff01;忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 …...

编程新知 2026/4/1 9:50:26

Graphormer在放射性药物中的应用：螯合剂分子稳定常数与配位能力预测

Graphormer在放射性药物中的应用&#xff1a;螯合剂分子稳定常数与配位能力预测 1. 项目概述 Graphormer是一种基于纯Transformer架构的图神经网络模型&#xff0c;专门为分子图(原子-键结构)的全局结构建模与属性预测而设计。该模型在OGB、PCQM4M等分子基准测试中表现优异&a…...

编程新知 2026/4/1 8:26:23

火影迷的AI绘画神器：忍者绘卷Z-Image Turbo零基础入门实战

火影迷的AI绘画神器&#xff1a;忍者绘卷Z-Image Turbo零基础入门实战 1. 前言&#xff1a;当火影忍者遇上AI绘画 作为一名火影迷&#xff0c;你是否曾经幻想过自己也能创造出独特的忍者世界角色&#xff1f;现在&#xff0c;借助"忍者绘卷Z-Image Turbo"这款专为火…...

编程新知 2026/4/1 7:53:51

智能体AI崛起：本体论如何赋能药物研发新纪元？——2026智能体年深度解析

智能体AI作为生成式AI的进化方向&#xff0c;赋予AI决策和行动能力&#xff0c;在生命科学领域应用前景广阔。本文探讨了智能体AI的定义、架构及应用&#xff0c;重点分析了本体论如何通过语义标准化和跨系统映射&#xff0c;解决智能体在处理复杂科学知识、实现跨语言和系统语…...

编程新知 2026/4/1 7:47:37

SAP移动类型全解析：从收货到移库，一文搞懂库存管理核心配置

SAP移动类型实战指南&#xff1a;解锁库存管理的核心密码 当你第一次在SAP系统中执行货物移动时&#xff0c;面对上百种移动类型代码&#xff0c;是否感到无从下手&#xff1f;作为全球500强企业广泛采用的ERP系统&#xff0c;SAP的库存管理模块以其严谨性和灵活性著称&#xf…...

编程新知 2026/4/1 6:23:35

Vue3 + FFmpeg.wasm 实战：5分钟搞定浏览器端视频格式转换（附完整代码）

Vue3 FFmpeg.wasm&#xff1a;浏览器端视频处理的革命性方案 当现代Web应用越来越依赖多媒体处理能力时&#xff0c;传统依赖后端转码的方案暴露出明显短板&#xff1a;上传耗时、服务器压力大、隐私数据外流风险。而FFmpeg.wasm的出现彻底改变了这一局面——这个基于WebAssem…...

编程新知 2026/4/1 6:23:34

李慕婉-仙逆-造相Z-Turbo AI核心原理科普：如何用Transformer理解并生成人类语言

李慕婉-仙逆-造相Z-Turbo AI核心原理科普&#xff1a;如何用Transformer理解并生成人类语言 你有没有想过&#xff0c;当你和“李慕婉-仙逆-造相Z-Turbo”这样的AI模型对话时&#xff0c;它到底是怎么“听懂”你的话&#xff0c;又“想”出那些回答的&#xff1f;它不像我们人…...

编程新知 2026/4/1 6:17:30

Qwen2.5-7B入门实战：从Docker到网页服务的全流程解析

Qwen2.5-7B入门实战&#xff1a;从Docker到网页服务的全流程解析 1. 引言&#xff1a;为什么选择Qwen2.5-7B Qwen2.5-7B是阿里最新开源的大语言模型&#xff0c;相比前代版本在知识量、编程能力和数学能力上有显著提升。对于想要快速体验大模型能力的开发者来说&#xff0c;通…...

编程新知 2026/4/1 6:13:23

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程：从安装到运行

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程&#xff1a;从安装到运行 想试试那个能看懂图片还能跟你聊天的多模态大模型MiniCPM-V-2_6吗&#xff1f;很多朋友在第一步——部署上就被卡住了&#xff0c;不是环境依赖搞不定&#xff0c;就是权限问题报错&#xff0c;折腾半天模型还…...

编程新知 2026/4/1 6:01:20