css实现div倾斜效果

效果如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
<style>
*{margin:0;padding: 0;}
.box1{margin:30px 100px;width:100px;height:200px;background:blueviolet;}
.box1{transform:rotate(7deg);-ms-transform:rotate(7deg); 	/* IE 9 */-moz-transform:rotate(7deg); 	/* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); 	/* Opera */}
.box2{margin:10px 100px;width:190px;height:418px;background:blue;border: 4px solid blue;}
.box2>img{width: 190px;height: 190px;}
.box2{transform:skewX(170deg);-ms-transform:skewX(170deg); 	/* IE 9 */-moz-transform:skewX(170deg); 	/* Firefox */-webkit-transform:skewX(170deg); /* Safari 和 Chrome */-o-transform:skewX(170deg); 	/* Opera */}
.box3{margin:10px 100px;width:100px;height:200px;background:pink;}
.box3{transform:skewY(160deg);-ms-transform:skewY(160deg); 	/* IE 9 */-moz-transform:skewY(160deg); 	/* Firefox */-webkit-transform:skewY(160deg); /* Safari 和 Chrome */-o-transform:skewY(160deg); 	/* Opera */}
</style><body><div class="box1">自古逢秋悲寂寥,我言秋日胜春朝。晴空一鹤排云上,便引诗情到碧霄。</div><hr /><div class="box2"><img src='img/kefu.png' /><p>自古逢秋悲寂寥,我言秋日胜春朝。晴空一鹤排云上,便引诗情到碧霄。</p></div><hr /><div class="box3">自古逢秋悲寂寥,我言秋日胜春朝。晴空一鹤排云上,便引诗情到碧霄。</div><script></script></body>
</html>

 

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

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

相关文章

【信息安全原理】——传输层安全(学习笔记)

&#x1f4d6; 前言&#xff1a;为保证网络应用&#xff0c;特别是应用广泛的Web应用数据传输的安全性&#xff08;机密性、完整性和真实性&#xff09;&#xff0c;可以在多个网络层次上采取安全措施。本篇主要介绍传输层提供应用数据安全传输服务的协议&#xff0c;包括&…

使用 HTTP Client 轻松进行 API 测试

在开发过程中&#xff0c;我们经常需要测试 API 接口以确保其正常工作。JetBrains 的集成开发环境&#xff08;IDE&#xff09;如 CLion、IntelliJ IDEA、PyCharm 等&#xff0c;默认内置了 HTTP Client 插件&#xff0c;可以方便地进行API测试。本文将介绍如何使用HTTP Client…

【面经】讲一下你对jvm和jmm的了解

JVM JVM是Java虚拟机&#xff0c;是Java程序的执行环境。它是一种虚拟的计算机&#xff0c;通过在实际的计算机上仿真模拟各种计算机功能来实现. JVM是Java程序运行的核心&#xff0c;可以将Java字节码转换为可执行的机器码&#xff0c;提供了跨平台性、优秀的垃圾回收器&…

2023年【汽车驾驶员(高级)】找解析及汽车驾驶员(高级)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;高级&#xff09;找解析是安全生产模拟考试一点通总题库中生成的一套汽车驾驶员&#xff08;高级&#xff09;复审考试&#xff0c;安全生产模拟考试一点通上汽车驾驶员&#xff08;高级&#…

Xilinx FPGA平台DDR3设计详解(一):DDR SDRAM系统框架

DDR SDRAM&#xff08;双倍速率同步动态随机存储器&#xff09;是一种内存技术&#xff0c;它可以在时钟信号的上升沿和下降沿都传输数据&#xff0c;从而提高数据传输的速率。DDR SDRAM已经发展了多代&#xff0c;包括DDR、DDR2、DDR3、DDR4和DDR5&#xff0c;每一代都有不同的…

长虹智能电视使用123

1、开机 在接通电源的情况下&#xff0c;长虹智能电视开机有两种方式。 方式1&#xff1a; 按电视右下角开机按钮 方式2&#xff1a; 按电视遥控器开机按钮 长虹智能电视开机后会进入其操作系统&#xff08;安卓&#xff09;。 屏幕左右双箭头图表&#xff0c;手指点击会…

Elasticsearch 外部词库文件更新

本文所使用的ES集群环境可在历史文章中获取&#xff0c;采用docker部署的方式。 Elasticsearch 是一个功能强大的搜索引擎&#xff0c;广泛用于构建复杂的全文搜索应用程序。在许多情况下&#xff0c;为了提高搜索引擎的性能和精度&#xff0c;我们可以使用外部词库来定制和扩展…

SpringMvc 常见面试题

1、SpringMvc概述 1.1、什么是Spring MVC &#xff1f;简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;通过把Model&#xff0c;View&#xff0c;Controller分离&#xff0c;将web层进行职责解耦&am…

3166练27.3 称心如意《信息学奥赛一本通编程启蒙(C++版)》

3166练27.3 称心如意《信息学奥赛一本通编程启蒙&#xff08;C版&#xff09;》 【题目描述】 每次测试后狐狸老师总会把成绩输入计算机&#xff0c;进行处理分析。但输入时有时会出错&#xff0c;如当满分为100分时&#xff0c;输入小于0或大于100的数&#xff0c;表示输入有…

短视频矩阵seo系统源码搭建----技术定制化开发

一、需要遵循一下技术开发步骤&#xff1a; 1. 确定需求和功能&#xff1a;明确系统的主要目标和需要实现的功能&#xff0c;包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构&#xff1a;根据需求和功能确定系统的架构&#xff0c;包…

Day57_《MySQL索引与性能优化》摘要

一、资料 视频&#xff1a;《尚硅谷MySQL数据库高级&#xff0c;mysql优化&#xff0c;数据库优化》—周阳 其他博主的完整笔记&#xff1a;MySQL 我的笔记&#xff1a;我的笔记只总结了视频p14-p46部分&#xff0c;因为只有这部分是讲解了MySQL的索引与explain语句分析优化…

模板初阶 C++

目录 泛型编程 函数模板 概念 格式 原理 函数模板的实例化 类模板 格式 类模板的实例化 泛型编程 当我们要实现一个交换函数&#xff0c;我们可以利用函数重载实现&#xff0c;但是有几个不好的地方 1.函数重载仅仅是类型不同&#xff0c;代码复用率较低&#xff0c;只…

小米智能电视投屏方法

小米智能电视也提供了投屏功能。 使用遥控器&#xff0c;在应用中找到它&#xff0c;点击进入。 小米电视支持windows笔记本&#xff0c;macbook笔记本&#xff0c;iphone手机&#xff0c;安卓手机投屏。 windows笔记本投屏 在投屏应用中找到windows投屏&#xff0c;选中开…

论文阅读[121]使用CAE+XGBoost从荧光光谱中检测和识别饮用水中的有机污染物

【论文基本信息】 标题&#xff1a;Detection and Identification of Organic Pollutants in Drinking Water from Fluorescence Spectra Based on Deep Learning Using Convolutional Autoencoder 标题译名&#xff1a;基于使用卷积自动编码器的深度学习&#xff0c;从荧光光谱…

AM@方向导数概念和定理

文章目录 abstract方向导数二元函数方向导数偏导数是方向导数的特例偏导数存在一定有对应的方向导数存在方向导数存在不一定有偏导数存在例 三元函数方向导数例 方向导数存在定理和计算公式证明二元函数三元函数 abstract 方向导数的概念,定理和计算公式方向导数是对偏导的补充…

用volta管理不同项目node版本

1 什么是volta volta是一个node.js的版本管理工具&#xff0c;你的电脑上安装了很多个node版本&#xff0c;volta可以让你在不同的项目中使用不同版本的node.js,并且可以切换node.js版本 Volta会自动将安装的Node.js版本与该项目绑定&#xff0c;使得您在该项目中执行 node、np…

Flutter 实战:构建跨平台应用

文章目录 一、简介二、开发环境搭建三、实战案例&#xff1a;开发一个简单的天气应用1. 项目创建2. 界面设计3. 数据获取4. 实现数据获取和处理5. 界面展示6. 添加动态效果和交互7. 添加网络错误处理8. 添加刷新功能9. 添加定位功能10. 添加通知功能11. 添加数据持久化功能 《F…

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

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

Python中68个内置函数的使用与归类

前言 在Python解释器中内置的、可以直接使用的函数。这些函数不需要额外的导入或安装&#xff0c;可以直接在Python代码中调用。Python内置函数包括了很多常用的功能&#xff0c;比如对数据类型的操作、数学运算、字符串处理、文件操作等。一些常见的内置函数包括print()、len…

python实现全向轮EKF_SLAM

python实现全向轮EKF_SLAM 代码地址及效果运动预测观测修正参考算法 代码地址及效果 代码地址 运动预测 简化控制量 u t u_t ut​ 分别定义为 v x Δ t v_x \Delta t vx​Δt&#xff0c; v y Δ t v_y \Delta t vy​Δt&#xff0c;和 ω z Δ t \omega_z \Delta t ωz…