共计 1536 个字符，预计需要花费 4 分钟才能阅读完成。
背景
本人一直对 CSS 很感兴趣，刚好我们团队有一位擅长 CSS 的大佬：COCO。
于是我找到他，建议做一期关于 CSS 的分享，于是就有了《CSS 创意构想》。
分享的内容很棒，里面有很多技巧，有的很实用，有的很华丽。听完之后，我觉得十分受用，就想结合自己的一些理解，再次 整理一番 ， 加深印象，二次吸收，所以就有了今天的文章。
满满的干货，也分享给大家，希望对大家有所启发。
布局
平行四边形
先抛一个问题，如何实现平行四边形布局效果?
-
transform？ -
叠加三角形？
仅仅实现形状的话，上面两种方式都是可以的。
但是，如果图形内部还有文字，需要正常排布，transform、叠加三角形 都不可行。
那怎么办呢？答案就是：shape-outside.
- shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行排版
- clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域
clip-path 语法：
{clip-path: circle(50px at 0 100px);
clip-path: ellipse();
clip-path: inset(10px 10px 10px 10px);
clip-path: polygon(10px 10px, 20px 20px, 30px 30px);
}图文混排 Demo:
https://codepen.io/Chokcoco/p…
CSS Shapes Demo：
https://codepen.io/Chokcoco/p…
一个适用的场景：适配 iPhone X 刘海头
镂空
使用阴影，可以非常简单的模拟遮罩效果，并且，圆角也是没有问题的。
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
垂直居中
抛出个问题：最快的水平垂直居中方法是什么？
你首先想到的是不是：flex, center, center ?
其实 margin 也可以：
<div class="g-container">
<div class="g-box"></div>
</div>
.g-container {display: flex;}
.g-box {margin: auto;}
原理：
在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去。
Live Demo:
https://codepen.io/Chokcoco/p…
还有这种常见的左右布局，也可以巧用 margin 来实现：
<ul class="g-nav">
<li> 导航 A </li>
<li> 导航 B </li>
<li> 导航 C </li>
<li> 导航 D </li>
<li class="g-login"> 登陆 </li>
<li> 注册 </li>
</ul>
.g-nav {display: flex;}
.g-login {margin-left: auto;}自动页脚
我们经常会遇到需要放置在页脚的元素，高度超过一屏时，自动顶下去：
这种效果也有很多种实现方式，巧用 margin 可以快速实现：
<div class="g-container">
<div class="g-real-box">
...
</div>
<div class="g-footer"></div>
</div>
.g-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.g-footer {
margin-top: auto;
flex-shrink: 0;
height: 30px;
background: deeppink;
}// 楼主等下有事出门，先发一部分。