Low Poly是计算机主流设计风格的一种。
当前主流设计风格包括：
1.拟物（Skeuomorph）
2.平面化（Flat Design）
3.长阴影（Long Shadow）
4.响应式（Responsive）
5.原质化（Material）
6.平行视差（Parallax）。
低多边形（Low Poly）不强调细腻的拟物模拟，而是使用抽象的几何方式来构造模型轮廓，同样达到栩栩如生的效果。
下面是一个简单的字母B形状图标的设计和开发实例。
HTML代码：
.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);
}