酷酷的 CSS3 三角形运用

2016/08/04 · CSS · 2
评论
·
CSS3,
三角形

原文出处: keepfool   

大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员

概述

在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

Triangle
Demo
 
|  Page
Demo
 
|  GitHub Source

今天给大家分享一下,修真院官网css任务5,深度思考中的知识点——CSS可以绘制哪些常见的特殊形状

图例

我们先来看一副设计图

威尼斯人线上娱乐 1

这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
我们将这些特殊形状和小图标分为两类:

1. 可以用Icon Font实现的

威尼斯人线上娱乐 2威尼斯人线上娱乐 3

Icon
Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
在网页中使用Icon
Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。
更多内容,请参考阿里巴巴矢量图标管理网站:http://iconfont.cn/

2. 不能用IconFont实现的

威尼斯人线上娱乐 4

为什么这些图形不用IconFont实现呢?因为通常Icon
Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
本篇要讲的就是如何通过CSS3来实现这4个图形。

1.背景介绍

在写网页的时候,会遇到需要装饰一些几何图形的情况,用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真,文件的占用空间较小,也可以减少http的请求。

三角形

不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

2.知识剖析

在css绘制图形时,一般要使用到border-radius,transform(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现

border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时,相对的是包含边框,padding后的尺寸。而不是单纯地相对于width/height值。

旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

一个参数时:表示水平和垂直同时缩放该倍率

两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

倾斜 skew

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

一个参数时:表示水平方向的倾斜角度;

两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

移动 translate

用法:transform: translate(45px)  或者 transform: translate(45px,
150px);

参数表示移动距离

本篇主要会用到skew和rotate

长方形边框

HTML的块级元素都是长方形的,比如我们设定了以下样式:

JavaScript

<style> .simple-retangle { margin: 50px auto; width: 200px;
height: 200px; border: 40px solid salmon; } </style> <div
class=”simple-retangle”></div>

1
2
3
4
5
6
7
8
9
<style>
    .simple-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 40px solid salmon;
    }
</style>
<div class="simple-retangle"></div>

如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

威尼斯人线上娱乐 5

这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

JavaScript

<style> .colored-border-retangle { margin: 50px auto; width:
200px; height: 200px; border-top: 40px solid coral; border-right: 40px
solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px
solid mediumpurple; } </style> <div
class=”colored-border-retangle”></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-retangle"></div>

在画面中,每个边框都变成一个梯形了。

威尼斯人线上娱乐 6

为什么它会变成梯形呢?

威尼斯人线上娱乐 7

请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

3.常见问题

如何用CSS绘制圆形(椭圆形)/三角形(梯形)/平行四边形

三角形的实现

再看看文章开头的4个图案,你是不是又发现了这样一个规律?每个三角形都是“小家碧玉”的,它们没有内容
既然如此,我们把上面这个彩色边框的矩形内容拿掉,看看会发生什么。

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto;
border-top: 40px solid coral; border-right: 40px solid lightblue;
border-bottom: 40px solid lightgreen; border-left: 40px solid
mediumpurple; } </style> <div
class=”colored-border-empty-retangle”></div>

1
2
3
4
5
6
7
8
9
10
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

呜,cool!左边和右边都是三角形了 耶!

威尼斯人线上娱乐 8

为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。 理解这一点,让上边和下边也变成三角形就简单了,将元素的width属性设为0:

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto; width:
0; height: 0; border-top: 40px solid coral; border-right: 40px solid
lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid
mediumpurple; } </style> <div
class=”colored-border-empty-retangle”></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        width: 0;
        height: 0;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

现在上下左右4个边框都是三角形了。

威尼斯人线上娱乐 9

假设我们不要4个三角形,也不要让它们凑一块,我们就只要1个三角形,该如何做呢?
将其他3个边框的颜色设为透明色:

JavaScript

<style> .triangle-top, .triangle-right, .triangle-bottom,
.triangle-left { margin: 20px auto; width: 0; height: 0; border: 100px
solid transparent; } .triangle-top { border-top-color: coral; }
.triangle-right { border-right-color: lightblue; } .triangle-bottom {
border-bottom-color: lightgreen; } .triangle-left { border-left-color:
mediumpurple; } </style> <div
class=”triangle-top”></div> <div
class=”triangle-right”></div> <div
class=”triangle-bottom”></div> <div
class=”triangle-left”></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .triangle-top,
    .triangle-right,
    .triangle-bottom,
    .triangle-left {
        margin: 20px auto;
        width: 0;
        height: 0;
        border: 100px solid transparent;
    }
    
    .triangle-top {
        border-top-color: coral;
    }
    
    .triangle-right {
        border-right-color: lightblue;
    }
    
    .triangle-bottom {
        border-bottom-color: lightgreen;
    }
    
    .triangle-left {
        border-left-color: mediumpurple;
    }
</style>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>

威尼斯人线上娱乐 10

4.解决方案

图案实现

知道了三角形的实现方法,那么下面4个图案实现起来就小Case了。

威尼斯人线上娱乐 11

这4个图案分别是:旗帜,向右的双实心箭头,气泡和丝带。

View
Demo

为了便于这几种图案的演示,我们先设定以下基础共通的样式

CSS

* { font-family: simhei, sans-serif; box-sizing: border-box; } html {
font-size: 62.5%; } body { background-color: lightblue; } div { margin:
20px auto; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
    font-family: simhei, sans-serif;
    box-sizing: border-box;
}
 
html {
    font-size: 62.5%;
}
 
body {
    background-color: lightblue;
}
 
div {
    margin: 20px auto;
}

5.编码实战

圆形/椭圆形

.circle{

width:10rem;

height:10rem;

border-radius:50%;

background:orange;

}

椭圆形只需改变矩形的边长

威尼斯人线上娱乐,三角形/梯形

.triangle{

margin-top:5rem;

width:0;

border-bottom:5rem solid#00a000;

border-left:5rem solid transparent;

border-right:5rem solid transparent;

}

梯形只需设定width的值即可

平行四边形

.parallelogram{

margin:5rem;

width:10rem;

height:5rem;

transform:skew(30deg);

background:orange;

}