CSS如何画出平行四边形

其实如果项目中有这样的画图 还是会用到的比如

在这里插入图片描述
看起来样子怪怪的 哈哈 但是确实可以完成一些需求哈哈哈

这个就要用到一个css3转换的一个 属性了 skew
让一个元素再平面上进行倾斜

 div {width: 200px;height: 50px;background-color: #f00;transform: skew(20deg);margin: 100px;}   

注意这个再画一些梯形的问题中还是很有效果的哦

在这里插入图片描述
关注我 持续更新前端知识 前端学无止境
毕竟坑太多了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/139021.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序 —— 会议OA项目首页布局与Mock数据交互

14天阅读挑战赛如果世界上有奇迹,那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性 二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建 一、小程序布局 1.1 Flex布…

SSM - Springboot - MyBatis-Plus 全栈体系(二十九)

第六章 SpringBoot 五、SpringBoot3 整合 MyBatis 1. MyBatis 整合步骤 导入依赖:在您的 Spring Boot 项目的构建文件(如 pom.xml)中添加 MyBatis 和数据库驱动的相关依赖。例如,如果使用 MySQL 数据库,您需要添加 …

C语言中static关键字用法

C语言中static关键字用法 2021年7月28日席锦 static关键字在c语言中比较常用,使用恰当能够大大提高程序的模块化特性,有利于扩展和维护。但是对于c语言初学者,static由于使用灵活,并不容易掌握。 变量 1.局部变量 普通局部变量是再…

实验2.1.3 交换机的远程配置

实验2.1.3 交换机的远程配置 一、任务描述二、任务分析三、实验拓扑四、具体要求五、任务实施(一) password认证1. 进入系统视图重命名交换机的名称为SWA2. 关闭干扰信息3. 设置vty为0-44. 设置认证方式为password5. 设置登录密码为:huawei6.…

[机缘参悟-110] :一个IT人对面具的理解:职业面具戴久了,就会忘记原本真实的自己,一个人是忠于职位,还是忠于内心?

目录 一、职业面具戴久了,就会忘记原本真实的自己 二、霸王别姬 三、没有对错,各走各路 3.1 程蝶衣:戏里戏外,忠于角色 3.2 段小楼:戏里戏外,角色分明 3.3 没有对错,各走各路 四、职场中…

【Linux学习笔记】下载工具yum

1. yum工具1.1. yum的安装1.2. yum的搜索1.3. yum的卸载 2. Linux和Windows互相传输文件2.1. rz命令2.2. sz命令 3. yum的下载源 1. yum工具 yum是Linux软件包的管理器,是一个软件。那么软件的本质是什么呢? 答案是指令! 下面举几个简单的例…

el-table :span-method合并单元格

<el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%" :height"300"><el-table-column type"index" label"序号" width"50"></el-table-column>&l…

C语言进行实验:通过程序实现线算图取值【支持VC++ 6.0编辑器环境运行】

背景&#xff1a; 一、实验目的和要求 1、能描述数据基本类型及其常量的表示方法&#xff1b; 2、会对变量进行定义及初始化&#xff1b; 3、能使用运算符与表达式对变量赋值&#xff1b; 4、会描述C语句的概念及种类、C语言常用的输入/出方式&#xff1b; 5、会设计顺序…

SpringCloud 完整版--(Spring Cloud Netflix 体系)

目录 SpringCloudSpring Cloud Netflix 体系分布式概念&#xff1a;分析图单体应用分布式架构集群微服务分布式微服务集群 服务注册与发现Eureka作用&#xff1a;为什么使用Eureka&#xff1f;解答&#xff1a;分析图 搭建&#xff1a;1、注册中心Eureka-server搭建创建项目配置…

电子电器架构——基于Adaptive AUTOSAR的电子电器架构简析

基于Adaptive AUTOSAR的电子电器架构简析 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…

[架构之路-240]:目标系统 - 纵向分层 - 应用层 - 应用层协议与业务应用程序的多样化,与大自然生物的丰富多彩,异曲同工

目录 前言&#xff1a; - 倒金子塔结构 - 大自然的组成 一、应用层在计算机系统中的位置 1.1 计算机应用程序的位置 1.1.1 业务应用程序概述 1.1.2 应用程序的分类 - 按照计算机作用范围 1.1.3 业务应用程序分类 - 按照行业分类 1.2 网络应用协议的位置 1.2.1 网络协…

Python学习基础笔记六十九——文本2

二进制&#xff08;字节&#xff09;模式&#xff1a; 文本文件&#xff0c;纯文本文件就是保存文本字符串的文件&#xff0c;跟word还不一样&#xff0c;word是富文本文件。 其实就文件存储的底层来说&#xff0c;不管什么类型的文件&#xff08;文本、视频、图片、word、Ex…