平行四边形

假如要制作平行四边形的按钮

可以通过使用transform：skew（）变形的属性来对这个矩形进行斜向拉伸就能实现

但是，一眼就能看出，里面的内容也跟着发生了拉伸现象。

解决方案一：

嵌套元素方案

<div class="click">
    <div>CLICK ME</div>
</div>


.click{transfrom:skew(-45deg)}
.click>div{transfrom:skew(45deg)}


得到的效果如下




很明显，问题得到了解决，但是意味着不得不添加额外的html元素，如果结构层不允许的，或者希望严格保持结构的纯净度，那就要使用另外的一个方案


解决方案二：


伪元素方案


<div class="click">CLICK ME</div>

.click {position:relative}
.click ::before{content:‘‘;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:#58a;transform:skew(-45deg)}


要注意的是：给伪元素加背景颜色后，会覆盖之前的元素，所以要加z-index：-1，让他堆叠到宿主元素之后。


效果图：




ps：以上代码有省略部分css样式
				


				
时间： 2024-08-24 06:16:13 

		


		


	

	
	

		


		
平行四边形的相关文章


						

		

			

                可以用旋转法绘制平行四边形
			

		

		

									

				很多的数学老师为了使自己的课程更加的生动有趣,往往会在课堂上使用一些辅助教程的软件,比如几何画板.但是这个需要老师能够熟练的掌握和使用这个软件.为了让大家在使用过程中更加的顺畅,我们特地推出了一系列的相关教程.今天就来给大家分享一下用旋转法如何绘制平行四边形. 具体的操作步骤如下: 步骤一 绘制三角形 打开几何画板,单击侧边栏“点工具”, 按住“Shift”键依次在画布上面绘制三个点,选中三点并按住“Ctrl+L”键,三角形就制作好了,如下图所示.  在几何画板中绘制三角形示例 步骤二 构造平行			

		

	

				

		

			

                平行四边形、梯形
			

		

		

									

				平行四边形: width: height: transform:skew(度数 deg) background: color 梯形: border-bottom:100px solid red border-left:50px solid transparent border-right:50px solid transparent height:0 weight:100px			

		

	

				

		

			

                FZU-2231 平行四边形数 From 福州大学第十三届程序设计竞赛
			

		

		

									

				FZU-Problem 2231 平行四边形数 Accept: 66 Submit: 210 Time Limit: 2000 mSec Memory Limit : 32768 KB Problem Description 在一个平面内给定n个点,任意三个点不在同一条直线上,用这些点可以构成多少个平行四边形?一个点可以同时属于多个平行四边形. Input 多组数据(<=10),处理到EOF. 每组数据第一行一个整数n(4<=n<=500).接下来n行每行两个整数xi,yi(0<=			

		

	

				

		

			

                JAVA——程序流程控制——循环语句——for循环（打印平行四边形）
			

		

		

									

				//   要求:用“*”打印出一个平行四边形,平行四边形边为8*. //   for双重循环 public class pingxingsibianxing { public static void main(String[] args) { for(int i=0;i<8;i++){ for(int k=8;k>i;k--){ System.out.print(" "); } for(int j=0;j<8;j++){ System.out.print("			

		

	

				

		

			

                HDU 5964 平行四边形
			

		

		

									

				假设直线L和L'相交于原点O.假设S ={s1,s2,...,sn}是平面上的n个点.你打 算找四个点满足如下条件:1.   A ∈ L 而 A' ∈ L'.2.   B,B'都属于S;即 B∈S 且B'∈S.3.   A,A'的中点与B,B'的中点重叠.这意味着ABA'B'是一个平行四边形(或者退 化的平行四边形).4.  平行四边形ABA'B'的面积最大. (中文题目,好评!) 题解来源:ICPCCamp 吐槽: 现场只有一组数据的,OJ上改成了多组.而且是超级多组 导致了卡输入. 没用快速			

		

	

						

		

			

                CSS3实现的平行四边形代码实例
			

		

		

									

				CSS3实现的平行四边形代码实例:本章节分享一段代码实例,它实现了平行四边形效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <st			

		

	

				

		

			

                打印等腰三角形和空心平行四边形
			

		

		

									

				<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <script type="text/javascript">// // 最后打出等腰三角形// var i;// var j;// var k;// funct			

		

	

				

		

			

                Parallelogram Counting（平行四边形个数，思维转化）
			

		

		

									

				1058 - Parallelogram Counting    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB There are n distinct points in the plane, given by their integer coordinates. Find the number of parallelograms whose vertices lie on these po			

		

	

				

		

			

                接收行数，打印平行四边形
			

		

		

									

				要求:输入一个1-10的整数,打印出一个如下图的平行四边形 public static void main(String[] args) { System.out.println("请输入需要打印的平行四边形行数:"); Scanner sc=new Scanner(System.in); int hang=sc.nextInt(); if(hang<0||hang>10){ System.out.println("输入的行数无效!"); return;