使用css3绘制出各种几何图形

思路：伪元素方案:是把所有样式（背景、边框等）应用到伪元素上，然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。代码如下：

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;
}

8、菱形

思路：我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。代码如下：

html:

复制代码

<div>transform:rotate()</div>

css:

复制代码

（编辑：泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!