思路:伪元素方案:是把所有样式(背景、边框等)应用到伪元素上,然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的,所以内容并不会受到变形的影响。代码如下:
html:
复制代码 代码如下: <div>transform:skew()</div>
css:
复制代码 代码如下: .button { width:200px; height: 100px; position: relative; left: 100px; line-height: 100px; text-align: center; font-weight: bolder; } .button::before { content: ''; /* 用伪元素来生成一个矩形 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transform: skew(45deg); background: #8BC34A; }
技巧总结:这个技巧不仅对 skew() 变形来说很有用,还适用于其他任何变形样式,当我们想变形一个元素而不想变形它的内容时就可以用到它。
8、菱形
思路:我们把这个技巧针对 rotate() 变形样式稍稍调整一下,再用到一个正方形元素上,就可以很容易地得到一个菱形。代码如下:
html:
复制代码 代码如下: <div>transform:rotate()</div>
css:
复制代码 代码如下: (编辑:云计算网_泰州站长网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|