自从CSS3推出后，使用CSS新推出的一些属性，我们可以实现很多以前只能使用图片才能实现的视觉效果。比如，圆角、圆形、平行四边形等视觉效果。
不过随着浏览器对CSS新属性支持的越来越好，借助CSS的形状（clip-path）、蒙版等属性，我们可以创建更多有趣的视觉效果，下面就选10个使用CSS实现的形状视觉效果的实例来展示下形状的魅力。
凹凸视觉效果
这个实例来CSS-Tricks网站的一篇文章，它使用clip-path实现了一个凹凸的视觉效果。如下图所示：
全屏剪裁图片，倒三角视觉效果
现在网页上，全屏图片应用的越来越广泛。比如下面这个实例，就是使用了CSS中的transform来实现的一个倒三角的视觉效果：
使用圆角，修饰内容
下面这个实例是使用圆角来实现的：
视窗视觉效果
使用CSS中的clip-path，我们实现任意的形状，并且还可以实现一些交互效果。比如，下面这个实例，使用clip-path实现了一个带有形状的鼠标滑过的交互效果。
菱形菜单视觉效果
斜角动画视觉效果
爆炸视觉效果
使用SVG可以实现类似文字的爆炸动画效果：
曲线环绕效果
图片环绕文字排列在之前的web中是一种很难实现的效果。不过有了最新CSS的shape-outside属性，要实现下面文字环绕图片的效果是很容易的：
拐角视觉效果
按钮是设计中经常出现的一个元素，一般也都是加一些圆角之类的视觉效果。不过，有时候只要稍微发挥点想象力，我们还是可以设计一些其它的拐角的视觉效果的。
荣誉勋章视觉效果
勋章的视觉效果能很好的突出重要的内容。不过，在以前的web开发中，我们一般都是使用图片来实现的。现在，可以直接使用CSS来实现。
总结
使用各种形状的视觉效果，可以大大的丰富视觉创意效果。特别是现在随着 CSS Grid 的推出，结合形状，可以创造出更加具有创意的视觉效果。
上面的例子，可能不是在每一个地方都适用，但是却可以展现技术在不断推动着web视觉创意向前发展。所以，我们更加要不断在web中来尝试新技术，这样才能做出更加具有创意的视觉效果。
本文主要是从10 Examples of Unorthodox Container Shapes Created with CSS整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
