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,一经查实,立即删除!

相关文章

【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…

我开始接单/兼职/搞副业/建设个人社区,为自己谋后路了。

我开始接单/兼职/搞副业/建设个人社区&#xff0c;为自己谋后路了。 简述 大家好&#xff0c;我是小荣&#xff0c;一个前端开发程序员。我最近开始在业余时间接私单了&#xff0c;也在想一些能够带来成长&#xff0c;收入的副业&#xff0c;主要也是为了自己谋后路&#xff…

C语言:数据结构(双向链表)

目录 1、双向链表的结构2、顺序表和双向链表的优缺点分析3、双向链表的实现 1、双向链表的结构 注意&#xff1a;这⾥的“带头“跟前面我们说的“头节点”是两个概念&#xff0c;实际前面的在单链表阶段称呼不严谨&#xff0c;但是为了更好的理解就直接称为单链表的头节点。 带…

SSH远程登录实操实验!

ssh远程登录协议&#xff1a;默认端口号22 以下实验7-2是服务端&#xff0c;7-1是客户端 服务器的相关信息&#xff1a; 服务名称&#xff1a;sshd 服务端主程序&#xff1a;/usr/sbin/sshd 服务端配置文件&#xff1a;/etc/ssh/sshd_config 客户端相关信息&#xff1a; …

python的输入输出(爽文,备忘,查询,友好)

Python中的输入输出主要涉及到输入函数和输出函数。 输出函数&#xff1a;print() print() 函数用于将信息输出到屏幕上。它可以输出字符串、变量的值&#xff0c;以及其他各种数据类型。 name "Alice" age 30 print("姓名:", name, "年龄:&quo…