秦小小樱

导航

平行四边形 css实现

首先将 display 设置为  inline-block 或block;

在应用skew(); transform:skewX(-45deg);

但是也会导致平行四边形内的文字倾斜如下

我们可以给文字加上一个容易 并设置相反的skew(),从而使内容的倾斜角度达到抵消的效果;

还有伪元素素的方法 没有试验成功。

https://www.w3cplus.com/css3/css-secrets/parallelograms.html

posted on 2017-12-11 17:58  RonnieQin  阅读(360)  评论(0编辑  收藏  举报