CSS揭秘三（形状）

时间：2020-06-10 00:29:17 阅读：52 评论：0 收藏：0 [点我收藏+]

一、椭圆

border-radius

二、平行四边形

1.嵌套元素方案skew

2.伪元素方案：

把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。当我们想变形一个元素而不想变形它的内容时就可以用到它。

（如果要在 IE8 下实现多重背景，这个方法往往是不错的变通解决方案。这个创意最初是由 Nicolas Gallagher（http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2）发现的。）

三、菱形图片

1.嵌套元素方案rotate

2.裁切路径

clip-path

四、切角效果

技术分享图片

CSS 渐变解决：

background: #58a;

background: linear-gradient(-45deg, transparent 15px, #58a 0);

五、梯形css 3D + 伪元素（把变形效果作用在伪元素上）

原文：https://www.cnblogs.com/forever-xuehf/p/13081870.html

踩

(0)

评论一句话评论（0）

分享档案

更多>