html平行四边形标签,平行四边形
问题
平行四边形是矩形的一个超集:它的边是平行的,但是角不一定是直角。
图注:一个平行四边形
在视觉设计,它们往往可以使设计显得更具活力,传达运动感。
图注:eb设计中的平行四边形(design by Martina Pitakova)
我们尝试用CSS创建按钮样式的链接。从普通的扁平按钮开始,带一些简单的样式,如图下图所示:
然后,我们应用skew()变换创建出倾斜的矩形,如下:
transform: skewX(-45deg);
但是,这也会导致平行四边形中的内容被倾斜,这使得它看起来很丑而且没有可读性。
图注:倾斜后的按钮,文本变得难以阅读
有什么办法可以只倾斜外边的形状容器,而不倾斜里边的内容吗?
嵌套元素的解决方案
我们可以给内容应用一个相反的skew()变换,把外边的变换抵消,这样就可以得到我们想要的结果。但是,这也意味着我们必须使用额外的HTML元素来包裹内容,如一个div:
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
如果你是给默认内联的元素应用这个效果,记得把它的display属性设置为inline-block或block,否则应用的变换不会生效。内部元素也一样。
正如下图的效果:
如如你看到,它运行没有问题,但是我们使用了一个额外的HTML元素。如果修改标签不是一个可选的方案,或者你真的希望保持标签纯度,别担心,这里还有一个纯CSS的解决方案。
伪元素解决方案
另一个方案是把所有的样式应用在伪元素上(背景、边框等等),然后为其应用变换。因为我们的内容不是被包裹在伪元素中的,它不会被变换影响。我们尝试使用这种技术给一个链接添加样式,跟前一节一样的方法。
我们需要让伪元素保持灵活性,并自动继承父元素的尺寸,即使它们的大小由内容决定。一个简单的方法时是父元素应用position: relative,然后给生成的元素应用position: absolute,然后把所有的偏移量都设置为0,这样它的水平和垂直方向都会继承父元素的大小。代码如下:
.button {
position: relative;
/* text color, paddings, etc. */
}
.button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
此时,生成的盒子是悬浮在内容上边的,一旦给它应用了背景,它将会覆盖住内容:
图注:我们的伪元素当前是悬浮在内容上边的,所以应用background: #58a来覆盖
我们可以给伪元素应用一个z-index: -1,这样它就会移动到父元素下方了。
现在,终于可以给我们的主要元素应用变换,然后查看结果了。最后的代码如下,生成的效果和前面的方案生成的效果完全一样:
.button {
position: relative;
/* text color, paddings, etc. */
}
.button::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
这些技术不仅对skew()变换有效。它们还可以结合其它变换使用,这样既可以改变元素的形状,但又不会对它的内容造成影响。例如,给一个方形元素使用rotate()变换,可以很容易地生成一个钻石( 菱形)形状。
还有,使用伪元素和定位来生成一个盒子,并添加样式,然后放置在父元素之下的方法,在很多其它的不同类型的效果实例中都可以使用,如:
一种常见的解决IE8中多背景的方法,由Nicolas Gallagher提供。
可以用来单独给背景应用像opacity这样的属性,由Nicolas Gallagher首创。
可以用来模拟多边框,以一种更灵活的方法。这样我们不可以使用第二章第二节的“Multiple borders”的技术。例如,当我们需要多个虚线边框,或多个用空格分隔的边框和透明度时。
html平行四边形标签,平行四边形相关推荐
- 将长方形木框拉成平行四边形_【减负提质进行时】平行四边形的面积再思考
平行四边形的面积是人教版五年级上册第七单元的起始课.在经历第一次尝试后,我进行了二次修改,整体思路如下. 课前我设计了如下前置作业: 目的是暴露学生的真实的学习基础,直面学生的学习疑惑,解决了他们的这 ...
- Java 实例 – 打印平行四边形和打印倒立的三角形
Java 实例 – 打印平行四边形和打印倒立的三角形 Java 实例 – 打印平行四边形 输出平行四边形. 实例 public class Parallelogram { public static ...
- 中心对称图形——平行四边形·复习整理
平行四边形 概述 平行四边形是初二最难的一章,对中考的影响较大 目前仍有考试做不出来的风险(不小),仍需提高绝对水平 概念 图形的旋转 旋转后的图形与原图形全等 对应点与旋转中心连线段相等 旋转角相等 ...
- 使用Java实现矩形 平行四边形 等腰三角形 菱形 倒三角
矩形代码: for(int i =1; i<=4 ;i++) {for(int a =1; a<=4; a++) {System.out.print("*");}//换 ...
- 多重循环打印图形(3)——打印平行四边形
1.打印平行四边形 打印平行四边形可以看成打印一个三角形,后固定输出一行固定的符号,配合换行字符,完成相应的图形. 主要代码: #define _CRT_SECURE_NO_WARNINGS //为解 ...
- 【Mermaid 语法详细教程 01】 流程图(Flowchart / graph)
说明 mermaid是一种解决文字图形转换的方案,用于在markdown标记语言中利用文本绘图,本文内容保证适合mermaid 8.8.3的内容,向上更新的内容不论. 本篇作为mermaid教程系列的 ...
- java搜狐笔试题_记录一次搜狐面试(包括笔试题)
1.如何用一个div实现下图 css #demo{ width:120px; height: 120px; border:2px solid #333; border-radius: 20px; po ...
- 判断小数是否相等_五年级上册数学综合练习题(填空、判断、选择、文字题),覆盖全册知识点!...
五年级上册判断题练习 1.整数乘法的运算定律对小数乘法同样适用 .( ) 2.小数不一定比整数小.( ) 3.两个小数相除 ,如果商大于被除数 ,那么除数一定大于.( ) 4.两个数相除 ...
- 初中数学知识点总结_初中数学知识点总结大全_经典版_
初中数学必考知识点总结 一.基本知识 ㈠.数与代数 A.数与式: 1.有理数 有理数: ①整数→正整数/0/负整数 ②分数→正分数/负分数 数轴: ①画一条水平直线,在直线上取一点表示0(原点),选取 ...
- 计算机涉及数学知识点,初二数学知识点归纳
无论你是带着欣喜还是遗憾进入了初二,一切都在这一刻重新开始.初二的数学学习开始啦!大家有没有什么好的学习方法来分享呢?知识点要学得明白,记得牢固.初二数学上册的知识点你知道吗?不知道的赶紧和沪江小编一 ...
最新文章
- C# BackgroundWorker 详解
- 图解 Serverless!秒懂!
- 9.停下来说说jquery
- 转:OAUTH协议简介
- 2.1 maven配置多镜像地址
- rabbitmq视频教程,面试官:
- java设计智慧教室_物联网智慧教室设计方案,更便捷的智慧教学体验
- Windows安装numpy详细教程
- delphi自带控件操作excel
- Mat 和 Iplimage* 相互转换
- linux下dbf是什么文件,dbf是什么文件?dbf文件怎么读取
- 如何以最快速度将Vue接入在线客服系统?
- scikit-learn 线性回归算法库小结
- Linux编译simplest_ffmpeg_player
- 2020编译原理练习记录(2)
- 英语听力采用计算机化考试,一图读懂北京高考英语听力机考流程,附特点及应对建议...
- 09_Mybatis-plus类型处理器示例,例如 json 字段对象转换
- python 运算太慢怎么办_干货|如何入门 Python 爬虫?爬虫原理及过程详解
- Qt编写可视化大屏电子看板系统26-模块4模具进度
- 如何快速实现在网页中调用文档扫描仪 (2)