css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）

上一小节给大家分享了各种椭圆的实现方法，此时我们来说一下平行四边形的实现方法。

平行四边形

基本变形属性transform有很多，接下来我们用到哪一个说哪一个。

我们一般用skew属性来对矩形进行斜向拉伸，变成平行四边形，但是如果直接对元素使用的话，它里面的内容也会跟着斜向变动。

嵌套元素方案

对容器内容再应用一次反向的skewX()变形，从而抵消容器的变形效果

来看一下html和css具体代码

伪元素方法

上面方法需要添加额外的HTML元素。这里提供一个不用添加额外的HTML元素的。

这种方法的思路是把所有的样式(背景、边框等)应用到伪元素上，然后对伪元素进行变形。

要注意几点：

一是要给宿主元素设置position: relative，并给伪类元素设置position: absolute，且偏移量都为0，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

二是伪元素生成的方块是重叠在内容之上的，一旦设置背景，就会遮住内容，应该设置z-index: -1或者更小的数，宿主没有设置z-index默认为0；

想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

就这样一个平行四边形效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！

css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）相关推荐

CSS3阴影实现方法及技巧全解
CSS3阴影实现方法及技巧全解网页设计中常常要用到阴影的效果,通过阴影可以比较容易突出一个元素,在没有CSS3的时候,一般都用图片做阴影效果,而现在通过使用CSS3的text-shadow和box- ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
html渐变色CSS3 渐变,如何实现css3渐变色，css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性描述 css transition 简写属性,用 ...
CSS3盒子模型（CSS3）
CSS3盒子模型(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
CSS3动画序列（CSS3）
CSS3动画序列(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
css3动画数字变化,css3动画的更深层次的探究（矩阵变换）
前言其实无论哪一门技术的发展都有其根源可揪,我之前做了一些css3动画的效果,对css3流畅而又实现简单的动画效果深深着迷,遂决定探究下css3动画的来世今生, 本文如有疏漏,请各位看官及时指出,以 ...

css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）

css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）相关推荐

最新文章

热门文章