css利用transform:skew()属性画一个大屏的背景斜面四边形特效

在工作工程中需要写一个如下的大屏背景,是由几个斜面做成的效果

在这里插入图片描述

使用css transform function中的skew()方法实现画其中一个斜面,然后调整背景色实现ß

  1. 写一个div
    <div class="skew_container test-2"><div class="skew_container_item"></div></div>  // css.test-2 {background-color: #17145d;padding: 40px;.skew_container_item {height: 20px;width: 10px;}
}

在这里插入图片描述
2. 添加transform属性

.test-2 {background-color: #17145d;padding: 40px;.skew_container_item {height: 20px;width: 10px;transform: skew(-45deg);}
}

在这里插入图片描述
3. 添加渐变背景色和阴影

.test-2 {background-color: #17145d;padding: 40px;.skew_container_item {height: 20px;width: 10px;transform: skew(-45deg);background: linear-gradient(#23d1fc 0%, #1768a3 90%, transparent 100%);box-shadow: 2px -2px 4px 0px rgba(23, 104, 163, 0.8); }
}

在这里插入图片描述
4. 重复三个,注意背景色不一样

在这里插入图片描述
至此。

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

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

相关文章

React中,双花括号和单花括号的区别(四)

在React中&#xff0c;花括号 {} 用于在JSX中插入JavaScript表达式。 单花括号 {}&#xff1a;通常用于在JSX中嵌入JavaScript表达式。这些表达式可以是变量、函数调用、对象字面量、数组等。React会评估这些表达式&#xff0c;并将结果插入到JSX中。 例如&#xff0c;在你的代…

【python笔记】datafram的时间动态可视化 pyecharts地图

import pandas as pd# 假设DataFrame是这样的&#xff1a; df pd.DataFrame({ year: [2014, 2015, 2016, 2014, 2015, 2016, 2014, 2015, 2016], province: [广东省, 广东省, 河南省, 湖南省, 北京市, 北京市, 上海市, 新疆维吾尔自治区, 上海市], values: [100, 150, 75…

Servlet文件嵌套<script>来显示提示框而出现乱码的解决方案

主要出现的原因就是编码不统一导致无法解析对话框中的字符串 我的解决方案: 使用 URL 的编码格式&#xff0c;然后再使用js中的decodeURIComponent函数解析URL编码的字符串&#xff0c;并且恢复其原始字符串内容 将你写的传统的编码格式改为 PrintWriter out resp.getWriter(…

多目标应用:MSSA多目标樽海鞘优化算法求解无人机三维路径规划(MATLAB代码)

一、无人机多目标优化模型 无人机三维路径规划是无人机在执行任务过程中的非常关键的环节&#xff0c;无人机三维路径规划的主要目的是在满足任务需求和自主飞行约束的基础上&#xff0c;计算出发点和目标点之间的最佳航路。 1.1路径成本 无人机三维路径规划的首要目标是寻找…

YOLOV8 pycharm

1 下载pycharm 社区版 https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows 2 安装 3 新建 4 选择 文件-> setting 配置环境变量 5 添加conda 环境

基本STL使用

一 、关于vector 在STL中有一个称为vector的数据结构&#xff0c;可以用来代替数组。 定义Book特性 private:vector<string> shelf_books;Notic : 类中不能使用类似的定义&#xff1a;vector<sttring> shelf_boos( 10 ); 定义Book方法 public:void setName(str…

5.C++动态内存管理(超全)

目录 1 .C/C 内存分布 2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free 3. C内存管理方式 3.1 new/delete操作内置类型 3.2 new和delete操作自定义类型 3.3 operator new函数 3.4 定位new表达式(placement-new) &#xff08;了解&#xff09; 4. 常…

Java 基础重点知识-(Java 语言特性、数据类型、常见类、异常)

文章目录 Java 语言特性形参和实参的区别是什么?值传递和引用传递的区别?Java 是值传递还是引用传递?final 的作用是什么?final finally finalize 有什么不同?static 的作用是什么?static 和 final 的区别是什么? Java 数据类型Java基本数据类型有几种? 各占多少位?基…

【MySQL精炼宝库】数据库的约束 | 表的设计 | 聚合查询 | 联合查询

目录 一、数据库约束 1.1 约束类型&#xff1a; 1.2 案例演示&#xff1a; 二、表的设计 2.1 一对一: 2.2 一对多: 2.3 多对多: 2.4 内容小结&#xff1a; 三、新增 四、查询 4.1 聚合查询&#xff1a; 4.1.1 聚合函数&#xff1a; 4.1.2 GROUP BY子句&#xff1a…

windows驱动开发-中断(一)

中断是windows中最难的一部分&#xff0c;这是因为中断本身属于操作系统的一部分&#xff0c;理解了中断和内存&#xff0c;对整个系统也就了解了。 中断部分会先从中断优先级、中断处理、中断服务例程入手&#xff0c;大概讲述一下中断的概念&#xff1b;接着从中断的一般实现…

C语言:指针详解(3)

目录 一、字符指针 二、数组指针 1.数组指针的定义 2.数组指针的初始化 3. 二维数组传参的本质 三、函数指针 1.函数指针的创建 2.函数指针的使用 3.有趣的代码(1) 4.有趣的代码(2) 四、typedef关键字 1.typedef的使用方法 2.typedef和#define的区别 五、函数指针…

前端性能优化知识梳理

1.重要性 当我们面试的时候&#xff0c;前端性能优化方面算是必考的知识点&#xff0c;但是工作中我们又很少会重点的对项目进行前端优化&#xff0c;它真的不重要吗&#xff1f; 如果我们可以将后端响应时间缩短一半&#xff0c;整体响应时间只能减少5%~10%。而如果关注前端…

imx6ull启动方式和镜像文件烧写

文章目录 前言一、BOOT启动方式1.串行下载2.内部BOOT模式 二、内部BOOT模式详细流程1.启动设备的选择2.镜像烧写 总结 前言 &#x1f4a6; I.MX6Ull 支持多种启动方式以及启动设备&#xff0c;比如可以从 SD/EMMC、NAND Flash、QSPI Flash等启动。用户可以根据实际情况&#x…

【web安全】-- 命令执行漏洞详解

本文将从原理开始介绍命令执行漏洞并附有三个实例来供各位客官学习 文章目录 一、什么是命令执行漏洞二、出现的原因三、有可能存在命令执行漏洞的函数&#xff08;php&#xff09;1、利用一些函数来实现命令执行2、直接执行系统命令的函数 四、命令拼接符号1、Windows2、linux…

QT:不同UI间数据,信号的交互

前言 接上文&#xff0c;手动绘制的矩形框毕竟还是在上位机的播放界面内&#xff0c;想要把数据发送给3559还是需要通过串口或者网口发送&#xff0c;没有部署在一个界面就需要不同UI间数据和信号进行交互了&#xff0c;数据还好说&#xff0c;全局变量都可以做到&#xff0c;信…

【c++】反向迭代器的探究实现

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 在list中我们实现了正向的迭代器&#xff0c;学习完优先级队列后&#xff0c;我们也对适配器模式有了一个深刻的理解&#xff0c;这篇文章基于这种模式下&#xff0c;实现各类容器的反向迭…

Docker-compose部署LTC同步节点

1、下载ltc程序包&#xff0c;litecoin下载地址 下载页 mkdir /data/docker-compose/ltc cd /data/docker-compose/ltc https://github.com/litecoin-project/litecoin/releases/download/v0.21.3/litecoin-0.21.3-x86_64-linux-gnu.tar.gz2、编写dockerfile和bitcoin.conf b…

头歌:Spark Streaming

第1关&#xff1a;套接字流实现黑名单过滤 简介 套接字流是通过监听Socket端口接收的数据&#xff0c;相当于Socket之间的通信&#xff0c;任何用户在用Socket&#xff08;套接字&#xff09;通信之前&#xff0c;首先要先申请一个Socket号&#xff0c;Socket号相当于该用户…

你不知道的CSS函数calc():解锁布局设计的新维度

在CSS的世界里&#xff0c;精确控制元素的尺寸和位置是每个前端开发者追求的目标。而CSS3引入的calc()函数&#xff0c;无疑为我们提供了前所未有的灵活性和精准度&#xff0c;让我们能够动态计算长度、宽度、高度等属性值&#xff0c;实现更为复杂的布局效果。本文将深入探讨c…

IDEA连接数据库

先在本地安装mysql connector net 安装navicat&#xff0c;连接mysql&#xff0c;并对mysql中的内容进行修改和查看&#xff0c;如新建数据库&#xff0c;新建表等 社区版的idea界面中找不到database选项&#xff0c;需要先在setting中的plugin中安装database navicate&#…