【SVG】CSS vs. SVG:任意图形UI组件

在这个系列教程的前两篇文章中，我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术——创建图形UI组件的技术。

具体地说，我们将要讨论的是如何创建圆形菜单效果，因为这是非矩形UI组件的典型案例。

有关于圆形菜单的相关教程、插件和工具：

• BUILDING A CIRCULAR NAVIGATION WITH SVG

• Circular Fly-Out Navigation Menu

• Circle Menu

• Code a Spinning Circular Menu With CSS

• Building A Circular Navigation with CSS Clip Paths

• Building a Circular Navigation with CSS Transforms

• Free jQuery circle menu Plugins

• circulus

让我们一起深入探讨这方面的技术。

首先要介绍的是CSS能不能创建非矩形的几何形状......

CSS Shapes

所有的HTML和CSS是一个矩形盒子。每个HTML元素就是一个矩形的盒模型。甚至图形和文本都是矩形。

几年前，CSS出了一个CSS Shapes规范，这样可以很轻易的实现非矩形的形状（比如，圆、椭圆和多边形等形状），并且可以根着非矩形的形状，让文本环绕在非矩形形状的周围，从而打破了文本只能实现矩形流的限制，使网页设计更有可能接近印刷设计的布局。

CSS Shapes（规范）并不能使元素的渲染成任意不规则形状外观，仅能影响文本内容流动形状。就算是元素内容围绕非矩形流动，元素本身仍是呈矩形状，除非你采取进一步技术手段来改变这种状况。在接下来我们将要讨论的就是如何做到这一点。

几何形状

其他类型的CSS形状——不要和上面提到的CSS Shapes混淆。这里所讲的几何形状指的是使用不同的CSS属性创建的几何形状，这样的创意其实并不适合我们需要的。

在HTML元素或伪元素上使用box-shadow、border-radius和其他的边框属性，可以在页面上实现不同的几何形状。但这些形状不是真正的形状，只是让你在视觉上感觉是几何形状。可以说这些形状是似的形状，跟元素的矩形或圆形是完全不同的。并且这些形状都基本上依赖于定位拼合出来的几何形状。

例如，使用border-*属性，你可以使用一个元素创建任何一个方向的三角形。只需要把元素的width和height设置为0，如果你将元素的边框颜色不设置为透明的颜色，你可以看到下面的动画展示了如何使用一个元素制作三角形：

因此，在CSS中通过这两个简单的步骤，只需要使用几行CSS代码就可以创建三角形形状。选择你想要哪个三角形，并且将其他边框的颜色设置为透明颜色。所以，如果你想要一个向上的三角形，你只要让底部的颜色值留着，而其他边框的颜色设置为透明颜色。

可以看看这个示例,当你鼠标悬浮在元素上时，你可以看到三角形形成的整个过程。

使用border-radius也可以制作出不同的形状，例如，使用一个空的div和其两个伪元素，可以创建一个心形形状出来。伪元素制作两个圆，然后使用定位，让他们重叠在一起，而形成一个心形的形状。下面的示例中演示出CSS制作心形的效果。如果你改变它的位置，你可以把它们分开，看看会发现什么。

使用CSS属性将多个元素组合起来，可以制作出很多复杂的形状。CSS-Tricks提供了很多个使用CSS创建图形形状的案例。如果你感兴趣，可以把代码拿出来玩玩。这里拿制作五角星形状的特殊案例来做阐述。

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px  solid red;
   border-left: 100px solid transparent;
   transform: rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   transform: rotate(-35deg);
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: '';
}

制作一个简单的图形形状，使用了相当多的代码，不是吗？除了border属性、伪元素和绝对定位之外，你还需要使用CSS的transform。像这些图形，如果使用上面介绍的方法来制作，并不适合，既不实际，而且不靠谱，不灵活。他们甚至不是真正的形状，缺乏语义，屏幕阅读器也无法识别。例如上面创建的心形，屏幕阅读器是无法识别出其是一个心形。如果你只想要一个小三角形，做为气泡提示方向，那么使用CSS来制作三角形是有意义的。然而，如果你仅想使用CSS的border、box-shadow等属性来创建一些复杂的图形形状，这绝对不是最好的方案。在空元素上使用CSS制作的图形都是欺骗用户得到的，如果在实际使用情况之下，使用CSS属性创建任何形状，仅仅是为了给用户提供一个假象。因此，我想通过更多的实例来告诉大家，可以使用CSS来制作更多不确定的图形形状。特别是今天要介绍的内容，如何使用两种不同的CSS方法创建圆形菜单。在这里我们将加入SVG的方法。通过实例看到这两种技术的利弊。