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

陈小峰_iefreer

于 2015-01-17 13:02:45 发布

阅读量3.8k

点赞数

分类专栏： Web Design html5 文章标签： css3 html5 低多边形字母

本文链接：https://blog.csdn.net/iefreer/article/details/42804625

版权

html5 同时被 2 个专栏收录

85 篇文章 1 订阅

订阅专栏

Web Design

13 篇文章 0 订阅

订阅专栏

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