[聚合文章] 前端女程序员教你，花样玩转CSS，它不只是一个简单的布局！

前几天看了一篇前端技术的文章 ， 颠覆了我对CSS认识，让我知道CSS不仅仅只是一个简单的布局，单标签操作也能如此美轮美奂。

于是我迫不及待想跟你们一起分享分享。

操作指南

本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影。

操作技巧

本文所有图形都会有个容器

.css-cell{

position: relative;

width: 100%;

height: 300px;

}

所有图形都是在容器内实现的，其结构如下：

天气那一块有部分会多一个容器，其结构如下：

下面贴出图形的具体实现和相对应的样式代码

【代码获取 ：前端学习交流裙：330336289 ，进裙邀请码（编号）：寂静 ， 不填不通过。

裙内不定时分享干货和各类源码，包括2018最新的前端企业案例学习资料和零基础入门教程，欢迎自学的小白和大神入群学习交流，分享技术。】

操作实战

心形：利用 圆形 和 正方形实现

气泡三角形：利用 border 的 transparent 特性实现