css clip-path polygon属性实现直角梯形

2024.3.8今天我学习了如何用css实现直角梯形的效果,

效果:

具体实现原理:

一、需要三个div:

外面一个大的div,里面左右两个小的div

我们需要先把第一个div变成直角梯形:

大概是这样,设置好之后,如果你想要把第二个div也设置成直角梯形会变成:

多出一个菱形,因为div的样式本身就不能超出它自己的范围,所以要进行第二步:

二、给外面div增加背景色:

不对里面的右边小div做处理,给外面div设置里面右边小div需要的背景颜色,然后里面左边的小div使用z-index:1覆盖在上面,这样就能实现左右都是直角梯形的效果。

代码如下:

<template><div class="outside_style"><div class="inside_left_style"></div><div class="inside_right_style"></div></div></template>
<style>
/* 外面div样式*/
.outside_style{width:200px;height:200px;display:flex;background: 'white';
}/* 里面div样式*/
.inside_left_style{width: 70%;height: 100%;background: rgb(2, 17, 42);z-index: 1;//把div覆盖在上面clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);//设置多边形的属性
}.inside_right_style{width: 30%;height: 100%;
}
</style>

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

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

相关文章

npm ERR! errno -13具体问题处理

npm ERR! errno -13具体问题处理 出现问题的报错 npm ERR! code EACCES npm ERR! syscall open npm ERR! path /Users/xxxx/.npm/_cache/index-v5/c6/06/xxxxx npm ERR! errno -13 npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! …

visual studio 将编译后的dll等文件自动复制到指定目录

编译后的文件dll等总要手动复制到指定目录下&#xff0c;为了解决这一繁琐的操作&#xff0c;可以直接设置在编译完成后&#xff0c;自动复制到目标目录 - 在解决方案资源管理器&#xff0c;选中项目右键-》选中属性-》在弹出的面板选择生成事件 - 在后期生成事件命令行里填写…

Java数值格式化前面补零

使用String类的format方法 Java中的String类提供了一个format方法&#xff0c;可以用来格式化字符串。我们可以使用该方法来进行数值前面补零的操作。 int number 5; String formattedNumber String.format("%02d", number); System.out.println(formattedNumber)…

PCM会重塑汽车OTA格局吗(1)

目录 1.汽车OTA概述 2.ST如何考虑OTA&#xff1f; 2.1 Stellar四大亮点 2.2 PCM技术视角下的OTA 3.小结 1.汽车OTA概述 随着智能网联汽车的飞速发展&#xff0c;汽车OTA也越来越盛行&#xff1b; 目前来讲OTA分为FOTA和SOTA(Software-over-the-air)两种&#xff0c;区别…

【博士每天一篇文献-综述】Modular Brain Networks

阅读时间&#xff1a;2023-11-27 1 介绍 年份&#xff1a;2016 作者&#xff1a;Olaf Sporns&#xff0c;Richard Betzel&#xff0c;印第安纳大学心理与脑科学杰出教授 期刊&#xff1a; Annual review of psychology 引用量&#xff1a;1205 详细介绍了模块化大脑网络及其如…

UE5 UE4 开发常用工具AssetDeveTool

AssetDeveTool工具&#xff0c;支持UE5 5.0-.5.3 UE4 4.26/4.27 下载链接&#xff1a; 面包多 https://mbd.pub/o/bread/ZZubkphu 工坊&#xff1a; https://gf.bilibili.com/item/detail/1104960041 包含功能&#xff1a; 自动化批量展UV功能 快速选择功能 自动化批量减面功能…

C++高级面试题:解释 C++ 中的动态类型(Dynamic Typing)和静态类型(Static Typing)

解释 C 中的动态类型&#xff08;Dynamic Typing&#xff09;和静态类型&#xff08;Static Typing&#xff09; C 中的动态类型&#xff08;Dynamic Typing&#xff09;和静态类型&#xff08;Static Typing&#xff09;是与类型检查相关的两个概念。 静态类型&#xff08;S…

京津冀光伏展

京津冀光伏展是一个旨在推动京津冀地区光伏产业发展的展览会。光伏产业是指利用太阳能光电转换技术&#xff0c;将太阳能转化为电能的产业。京津冀地区是中国重要的经济区域&#xff0c;也是光伏产业发展潜力很大的地区之一。京津冀光伏展为光伏企业提供了一个展示产品和技术的…

Python编程-如何轻松开启一个Web服务?

目录 前言 Flask&#xff1a;轻量级 Django&#xff1a;高级 Bottle&#xff1a;轻量级 Pyramid&#xff1a;灵活且可扩展 Tornado&#xff1a;可扩展、非阻塞 CherryPy&#xff1a;微型 轻量级的Web框架的选择 前言 在Python中开启一个Web服务有多种方法&#xff0c;选…

深入揭秘Lucene:全面解析其原理与应用场景(二)

本系列文章简介&#xff1a; 本系列文章将深入揭秘Lucene&#xff0c;全面解析其原理与应用场景。我们将从Lucene的基本概念和核心组件开始&#xff0c;逐步介绍Lucene的索引原理、搜索算法以及性能优化策略。通过阅读本文&#xff0c;读者将会对Lucene的工作原理有更深入的了解…

Android中Fragment生命周期的异常情况分析

Fragment生命周期中可能会出现一些异常情况&#xff0c;主要包括以下几种&#xff1a; Fragment未被销毁&#xff1a;当Fragment被创建后&#xff0c;如果没有被销毁&#xff0c;但又被移除&#xff0c;就会导致Fragment的生命周期问题。这种情况下&#xff0c;可以通过在Frag…

Springboot+vue的物业管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的物业管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的物业管理系统&#xff0c;采用M&#xff08;model&#xff09;V&#xff…

LeetCode 面试题08.04.幂集

幂集。编写一种方法&#xff0c;返回某集合的所有子集。集合中不包含重复的元素。 说明&#xff1a;解集不能包含重复的子集。 示例: 输入&#xff1a; nums [1,2,3] 输出&#xff1a; [ [3], [1], [2], [1,2,3], [1,3], [2,3], [1,2], [] ] 法一&#xff1a;幂集有2的n次…

【MapReduce】03.MapReduce框架原理

目录 1.InputFormat数据输入 1.1.切片与MapTask并行度决定机制 1.2.Job提交流程源码和切片源码 1.3.FileInputFormat切片机制 1.4.TextInputFormat 1.5.CombineTextInputFormat切片机制 1.6.CombineTextInputFormat 1.InputFormat数据输入 1.1.切片与MapTask并行度决定…

CSS盒子模型笔记

尚硅谷学习视频链接&#xff1a;117_CSS_盒子模型的组成部分_哔哩哔哩_bilibili 1、盒子组成 盒子组成 content内容 padding border &#xff08;margin不包含在盒子内&#xff09; 2、div样式width、height 当css3属性box-sizingcontent-box&#xff08;默认&#xff0…

0-hackbar最新版本(2.3.1)工具安装(超详细)

通过火狐搜索安装后&#xff0c;是需要收费的&#xff0c;获取url都是困难的 打开火狐浏览器右上角的三个横线-拓展和主题 百度界面按F12后的提示 修改过程&#xff1a; 按照如上一步步找到对应的文件&#xff0c;拖到桌面上 是一个xpi文件&#xff0c;以打开压缩包的方式打开…

漏洞复现-蓝凌LandrayOA系列

蓝凌OA系列 &#x1f52a; 是否利用过 优先级从高到低 发现日期从近到远 公司团队名_产品名_大版本号_特定小版本号_接口文件名_漏洞类型发现日期.载荷格式LandrayOA_Custom_SSRF_JNDI漏洞 LandrayOA_sysSearchMain_Rce漏洞 LandrayOA_Custom_FileRead漏洞

python中的模块

6模块 退出 Python 解释器后&#xff0c;再次进入时&#xff0c;之前在 Python 解释器中定义的函数和变量就丢失了。因此&#xff0c;编写较长程序时&#xff0c;最好用文本编辑器代替解释器&#xff0c;执行文件中的输入内容&#xff0c;这就是编写 脚本 。随着程序越来越长&…

智能音箱技术解析

目录 前言智能音箱执行步骤解析1.1 探测唤醒词或触发词1.2 语音识别1.3 意图识别1.4 执行指令 2 典型的智能音箱2.1 百度小度音响2.2 小米小爱同学2.3 苹果 HomePod 3 功能应用举例3.1 设置计时器3.2 播放音乐 结语 前言 智能音箱已经成为日常生活中不可或缺的一部分&#xff…

飞驰云联CEO朱旭光荣获“科技领军人才”称号

2024年2月29日&#xff0c;苏州工业园区“优化营商环境暨作风效能建设大会”成功举办&#xff0c;会上公布了2023年度苏州工业园区第十七届第一批金鸡湖科技领军人才名单&#xff0c;Ftrans飞驰云联创始人兼CEO朱旭光先生凭借在数据安全以及文件交换领域取得的突出成果&#xf…