美文网首页前端Web前端之路CSS
CSS3技巧之形状(平行四边形)

CSS3技巧之形状(平行四边形)

作者: 叮咯咙咚DQ | 来源:发表于2017-04-06 09:50 被阅读88次

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

平行四边形

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

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

嵌套元素方案

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

来看一下html和css具体代码

伪元素方法

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

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

注意几点:

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

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

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

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

相关文章

  • CSS3技巧之形状(平行四边形)

    上一小节给大家分享了各种椭圆的实现方法,此时我们来说一下平行四边形的实现方法。 平行四边形 基本变形属性trans...

  • CSS3技巧之形状(椭圆)

    回顾那个只能用图片展示形状的日子,之前接触前端的小伙伴们,大家一定会有颇多感触,好在现在我们可以使用纯CSS实现更...

  • CSS3技巧之形状(切角效果)

    上一小节给大家分享了平行四边形的实现方法,此时我们来说一下切角效果的实现方法。 实现切角效果需要掌握的几个点包括:...

  • CSS3 画形状

    在制作页面时,常用CSS画各种形状带代替img,这样可以免去一次HTTP请求。而且有些基本形状用CSS实现比切图更...

  • 元素形状之“平行四边形”

    设计场景 在视觉设计中,平行四边形往往可以传达出一种 动感 只让容器的形状倾斜,而保持其内容不变 嵌套元素解决方案...

  • 0401探究平行四边形的面积公式

    教师出示一个长方形框架,问道:长方形的面积等于什么?长乘宽。 拉动长方形框架呈平行四边形状。那么,平行四边形的面积...

  • 草木人间96

    以恒拿着一枚小木块问:娘孃,这是什么形状? 平行四边形。 为什么叫平行四边形? 我本来想对他再作详细的解释,但想想...

  • CSS3绘制各种形状

    现在的CSS功能非常强大了,特别是CSS3的属性,例如转换属性,过渡属性,动画属性,能做的效果非常多。在网页开发中...

  • CSS3绘制各种形状

    本文为叩丁狼高级讲师原创文章,转载请注明出处。 现在的CSS功能非常强大了,特别是CSS3的属性,例如转换属性,过...

  • 阅读CSS Secrets(九)

    平行四边形 这里需要用到css3的transform属性 使用skewY来制作跟向Y轴倾斜的四边形 多个div然后...

网友评论

    本文标题:CSS3技巧之形状(平行四边形)

    本文链接:https://www.haomeiwen.com/subject/vqvfattx.html