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

发布时间：2020-03-16 13:14 所属栏目：52 来源：站长网

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

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

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:

复制代码

代码如下:

（编辑：ASP站长网）