平行四边形

使用css打造形形色色的形状!

做~自己de王妃 提交于 2020-01-03 08:41:27
  css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两得! 这篇博文会主要介绍一些常见的图形,如圆、椭圆、三角形、平行四边形、菱形、切角效果等等。     由于这篇博文中的多数实现代码用到了css3,鉴于篇幅有限,所以大家如果对css3不太了解可以先看我的博文《 强大的css3 》。 第一部分:圆   用css创建一个圆是很简单的,只需要把border-radius的值设置位宽和高的一般即可,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梯形</title> <style> div{ width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50px; background: red; color:white; } </style> </head> <body> <div>918之初</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

CSS实现平行四边形布局效果

断了今生、忘了曾经 提交于 2019-12-14 21:37:50
如何实现下图所示的平行四边形布局效果? 一、skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform 中的 skew() / skewX() / skewY() 方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮的 transform:skewX(-10deg) : .input-x { display: inline-block; position: relative; z-index: 0; } .input-x::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid #ddd; background-color: #fff; border-radius: 4px; transform: skewX(-10deg); z-index: -1; } .input { display: block; padding: 8px 10px; border: 0; background: none; } web前端开发学习Q-q-u-n

十九、行列式的意义

心已入冬 提交于 2019-12-02 08:44:13
矩阵行列式的意义:1. 求解2x2矩阵的逆矩阵 2. 求解平行四边形的面积 3. 作为面积因子 1. 求解2x2矩阵的逆矩阵 求2x2矩阵的逆矩阵时,需要用到行列式,前面已经介绍过了 2. 求解平行四边形的面积 平行四边形的一个顶点位于笛卡尔坐标系的原点,将与原点相连的两边当成位置向量,再由两个位置向量构成一个矩阵,此时矩阵的行列式的绝对值,就是平行四边形的面积 假设: 两个向量构成的矩阵为: 则两个向量构成的平行四边形的面积为: 证明 : v2在v1上的投影为: 平行四边形的高h的平方为: 平行四边形的面积为: 这是一个非常巧妙的结果,矩阵的列向量构造了平行四边形,平行四边形的面积就等于矩阵行列式的绝对值,并且交换矩阵的行或列,面积不变。 3. 作为面积因子 如果有一个区域(形状任意),假设它的面积为Area,对它进行T变换,得到一个新的区域,新区域的面积为原始面积Area乘以变换矩阵行列式的绝对值。变换矩阵的行列式,本质上是一个面积比例 证明: 假设长方形由: 四个向量指定的点,连接起来构成,长方形的面积为: 长方形在变换T下的像,等于对长方形的四个顶点做变换,然后把这些点连接起来。 假设变换T为: 根据上一小节的介绍,长方形经过T变换后的像,为平行四边形,因此像的面积为 的行列式的绝对值,即: 因此,长方形经过T变换后的像的面积,等于长方形的原始面积

css3写平行四边形

天涯浪子 提交于 2019-12-01 01:28:47
<html> <head> <meta charset="UTF-8"> <title>平行四边形</title> <style type="text/css"> .skew { width: 100px; height: 73px; background: #f0eb4f; margin: 0 auto; text-align: center; transform: skew(15deg); box-shadow: 2px 3px 5px #a7a0a0; } .skew-main { transform: skew(-15deg); } </style> </head> <body> <div class="skew"> <div class="skew-main">平行四边形</div> </div> </body> </html> 结果如图所示: 来源: https://www.cnblogs.com/150536FBB/p/11645786.html

向下转型与向下转型

谁说胖子不能爱 提交于 2019-11-30 16:44:51
对象类型的转换   对象类型的转换包括向上类型转换与向下类型转换。 1、 向上类型转换   将子类对象赋值给父类类型的变量,这种技术称为 “向上转型”。   在面向对象中越上层的类越抽象,越下层的类越具体,越具体的类具有越多的特性,由于向上转型是将较具体的类转到较抽象的类,所以它 总是安全 的。 2、 向下类型转换   将父类对象赋值给子类类型的变量,这种技术称为 “向下转型”。   由于是将较抽象的类转为较具体的类,这样的转型比较 危险 。子类对象总是父类的一个实例,父类对象不一定是子类的实例。子类总是具有父类的特性,子类具有的特性父类不一定具有。   回想一下平行四边形、矩形、正方形具有的特性: 平行四边形 矩形 正方形 ①两组对边平行且相等 ①两组对边平行且相等 ①两组对边平行且相等 ②有一个角是直角 ②有一个角是直角 ③四条边相等   越下层的类越具体,越具体的类具有的特性越多。向上转型之所以是安全的,因为子类具有父类所有的特性。在程序中进行向下转型时,必须使用显示类型转换,向编译器说明要将父类对象转换为哪一类型的子类对象。   在程序中,引用存储着对象的内存地址,父类的引用能够存储父类及其子类对象的地址, 对于到底存储的是父类对象的地址子类对象的地址引用并不知晓 。比如,平行四边形类的引用只知道自己保存的地址是一个平行四边形的地址,具体是矩形还是正方形它并不知道。  

类和对象

生来就可爱ヽ(ⅴ<●) 提交于 2019-11-27 20:27:54
1、Python中面向对象程序设计特点:封装、继承和多态 关于继承:可以打个形象的比方 矩形、菱形、平行四边形和梯形等都是四边形,以平行四边形为例,如果把平行四边形看成四边形的延伸,那么平行四边形就复用了四边形的属性和行为,同时添加了平行四边形特有的属性和行为,如平行四边形的对边平行且相等。 ---->在Python中可以把平行四边形类看作是继承四边形类后产生的类,其中,将类似于平行四边形的的类称为子类,将类似于四边形的类称为父类或超类, 在阐释平行四边形和四边形关系时,可以说平行四边形是特殊的四边形,却不能说四边形是平行四边形。 ---->同理Python中可以说子类的实例都是父类的实例,却不能说父类的实例都是子类的实例。 继承中 方法重写 :指的是派生类方法想重写,不想从基类继承时,就需要改写基类的方法。 基类的成员都会被派生类继承,当基类中的某个方法不完全适用于派生类时,就需要在派生类中重写父类的这个方法。 class Fruit: # 父类 def harvest(self): pass class Apple(Fruit): # 派生类 def harvest(self): # 方法重写 pass 派生类中定义的__init__方法不会自动调用基类的__init__方法,如想让他调用,需要在派生类中加入super()__init__() class Fruit: # 父类

Java核心(接口、继承和多态-接口)

喜夏-厌秋 提交于 2019-11-26 21:59:49
一、接口 1.1 抽象类 在解决实际问题时,一般将父类定义为抽象类,需要使用这个父类进行继承与多态处理。回想继承与多态原理,继承树中越是在上方的类越抽象,如鸽子类继承鸟类,鸟类继承动物类等。在多态机制中,并不需要将父类初始化对象,我们需要的只是子类,所以在 Java 语言中设置抽象类不可以实例化对象,因为图形类不能抽象出任何一种具体图形,但它的子类却可以。 抽象类的语法: public abstract class Test{ abstract void testAbstract(); //定义抽象方法 } 其中 , sbatract 是定义抽象类的关键字。 使用 abstract 关键字定义的类称为抽象类,而使用这个关键字定义的方法称为抽象方法,抽象方法没有方法体,这个方法本身没有任何意义,除非它被重写,而承载这个抽象方法的抽象类必须被继承,实际上抽象类畜类被继承之外没有任何意义。 反过来讲,如果声明一个抽象的方法,就必须将承载这个抽象方法的类定义为抽象类,不可能在非抽象类中获取抽象方法。换句话说,只要类中有一个抽象方法,此类就被标记为抽象类。 继承抽象类的所有子类需要将抽象类中的抽象方法进行覆盖。这样在多态机制中,就可以将父类修改为抽象类,将 draw() 方法设置为抽象方法,然后每个子类都重写这个方法来处理。但这又会出现冗余的代码,同时这样的父类局限性很大,也许某个不需要

Java学习日记——接口/继承/多态、高级特性(JAVA类包、final)、内部类 20190304

拥有回忆 提交于 2019-11-26 21:55:17
LEARNING ## 一、接口、继承、多态 1、类的继承 class Test2 extends Test{ //关键字extends标识继承关系 public Test2(){ super(); //关键字super调用父类构造方法和成员方法 super.doSomething(); //调用构造方法只能在构造方法中 } public void doSomethingnew(){ //SomeStence } public void doSomething(){ //SomeNewStence } protected Test2 dolt(){ return new Test2(); } } 重写:将父类的成员方法名称保留,重写实现内容,更改权限 重构:子、父类的成员方法返回值、方法名、参数类型以及个数完全相同,唯一不同的是方法实现内容 2、Object类 java.lang.O—bject——所有类的父类 ①getCalss()——getClass().getName(); 返回对象执行时的Class实例,然后使用getName()取得类的名称 ②toString()——将一个对象返回为字符串形式,通常重写 public class ObjectInstance{ public String toString(){ return "在"+getClass().getName(