CSS3 低多边形（Low Poly）设计及开发实例 - 简单的字母

Low Poly是计算机主流设计风格的一种。

当前主流设计风格包括：

1.拟物（Skeuomorph）

2.平面化（Flat Design）

3.长阴影（Long Shadow）

4.响应式（Responsive）

5.原质化（Material）

6.平行视差（Parallax）。

低多边形（Low Poly）不强调细腻的拟物模拟，而是使用抽象的几何方式来构造模型轮廓，同样达到栩栩如生的效果。

下面是一个简单的字母B形状图标的设计和开发实例。

HTML代码：

<div class="b" data-scale="10">    <span class="triangle-left"></span>    <span class="triangle-left"></span>    <span class="triangle-left"></span>    <span class="triangle-left"></span>    <span class="triangle-left"></span>    <span class="triangle-right"></span>    <span class="triangle-right"></span>    <span class="triangle-right"></span></div>

CSS代码：

.b {    position: absolute;    width: 100px;    height: 100px;    left: 50%;    top: 50%;    -webkit-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}.b [class*="triangle-"] {    display: block;    /* Let's define the positions */        margin: 0;    padding: 0;    position: relative;}.b [class*="triangle-"][class*="-left"]:not(:first-child) {    margin-top: -30px;}.b [class*="triangle-"][class*="-left"]:nth-child(even) {    width: 0;    height: 0;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    border-left: 60px solid purple;}.b [class*="triangle-"][class*="-left"]:nth-child(even):nth-child(2) {    border-left-color: #ddd9cc;}.b [class*="triangle-"][class*="-left"]:nth-child(even):nth-child(4) {    border-left-color: #c8bdb7;}.b [class*="triangle-"][class*="-left"]:nth-child(odd) {    width: 0;    height: 0;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    border-right: 60px solid purple;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(1) {    border-right-color: #e6e3d6;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(1):after {    display: block;    content: '';    width: 0;    height: 0;    border-top: 7.5px solid transparent;    border-bottom: 7.5px solid transparent;    border-left: 60px solid #bebdc5;    -webkit-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    -ms-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    margin-top: -19px;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(3) {    border-right-color: #d3cdc1;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(3):after {    display: block;    content: '';    width: 0;    height: 0;    border-top: 7.5px solid transparent;    border-bottom: 7.5px solid transparent;    border-left: 60px solid #8c8597;    -webkit-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    -ms-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    margin-top: -19px;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(5) {    border-right-color: #baada7;}.b [class*="triangle-"][class*="-left"]:nth-child(odd):nth-child(5):after {    display: block;    content: '';    width: 0;    height: 0;    border-top: 7.5px solid transparent;    border-bottom: 7.5px solid transparent;    border-left: 60px solid #675b68;    -webkit-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    -ms-transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    transform: rotate(-32deg) skewX(30deg) translate(5.8%, 5.8%) scaleX(1.05);    margin-top: -19px;}.b [class*="triangle-"][class*="-right"] {    left: 60px;    top: -90px;}.b [class*="triangle-"][class*="-right"]:not(:first-child) {    margin-top: -30px;}.b [class*="triangle-"][class*="-right"]:nth-child(even) {    width: 0;    height: 0;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    border-left: 60px solid purple;}.b [class*="triangle-"][class*="-right"]:nth-child(even):nth-child(6) {    border-left-color: #aca5ad;}.b [class*="triangle-"][class*="-right"]:nth-child(even):nth-child(6):after {    display: block;    content: '';    width: 0;    height: 0;    border-top: 7.5px solid transparent;    border-bottom: 7.5px solid transparent;    border-right: 60px solid #6a6a85;    -webkit-transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    -ms-transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    margin-top: -18px;    margin-left: -62.5px;}.b [class*="triangle-"][class*="-right"]:nth-child(even):nth-child(8) {    border-left-color: #847789;}.b [class*="triangle-"][class*="-right"]:nth-child(even):nth-child(8):after {    display: block;    content: '';    width: 0;    height: 0;    border-top: 7.5px solid transparent;    border-bottom: 7.5px solid transparent;    border-right: 60px solid #473e4f;    -webkit-transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    -ms-transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    transform: rotate(32.5deg) skewX(-30deg) translate(-5%, -5%) scaleX(1.05);    margin-top: -18px;    margin-left: -62.5px;}.b [class*="triangle-"][class*="-right"]:nth-child(odd) {    width: 0;    height: 0;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    border-right: 60px solid purple;}.b [class*="triangle-"][class*="-right"]:nth-child(odd):nth-child(7) {    border-right-color: #9a8f9f;}.b[data-scale="1"] {    -webkit-transform: translate(-50%, -50%) scale(0.1);    -ms-transform: translate(-50%, -50%) scale(0.1);    transform: translate(-50%, -50%) scale(0.1);}.b[data-scale="2"] {    -webkit-transform: translate(-50%, -50%) scale(0.2);    -ms-transform: translate(-50%, -50%) scale(0.2);    transform: translate(-50%, -50%) scale(0.2);}.b[data-scale="3"] {    -webkit-transform: translate(-50%, -50%) scale(0.3);    -ms-transform: translate(-50%, -50%) scale(0.3);    transform: translate(-50%, -50%) scale(0.3);}.b[data-scale="4"] {    -webkit-transform: translate(-50%, -50%) scale(0.4);    -ms-transform: translate(-50%, -50%) scale(0.4);    transform: translate(-50%, -50%) scale(0.4);}.b[data-scale="5"] {    -webkit-transform: translate(-50%, -50%) scale(0.5);    -ms-transform: translate(-50%, -50%) scale(0.5);    transform: translate(-50%, -50%) scale(0.5);}.b[data-scale="6"] {    -webkit-transform: translate(-50%, -50%) scale(0.6);    -ms-transform: translate(-50%, -50%) scale(0.6);    transform: translate(-50%, -50%) scale(0.6);}.b[data-scale="7"] {    -webkit-transform: translate(-50%, -50%) scale(0.7);    -ms-transform: translate(-50%, -50%) scale(0.7);    transform: translate(-50%, -50%) scale(0.7);}.b[data-scale="8"] {    -webkit-transform: translate(-50%, -50%) scale(0.8);    -ms-transform: translate(-50%, -50%) scale(0.8);    transform: translate(-50%, -50%) scale(0.8);}.b[data-scale="9"] {    -webkit-transform: translate(-50%, -50%) scale(0.9);    -ms-transform: translate(-50%, -50%) scale(0.9);    transform: translate(-50%, -50%) scale(0.9);}.b[data-scale="10"] {    -webkit-transform: translate(-50%, -50%) scale(0.1);    -ms-transform: translate(-50%, -50%) scale(0.1);    transform: translate(-50%, -50%) scale(0.1);    -webkit-transform: translate(-50%, -50%) scale(1);    -ms-transform: translate(-50%, -50%) scale(1);    transform: translate(-50%, -50%) scale(1);}

在线演示：http://wow.techbrood.com/fiddle/4504