CSS3 三角形運用

酷酷的 CSS3 三角形運用

概述

在早期的前端Web設計開發年代，完成一些頁面元素時，咱們必需要有專業的PS美工爸爸，由PS美工爸爸來切圖，作一些圓角、陰影、鋸齒或者一些小圖標。

在CSS3出現後，藉助一些具備魔力的CSS3屬性，使得這些元素大多均可以由開發人員本身來完成。在開始閱讀這篇文章前，咱們先喊個口號：不想當藝術家的程序員不是好設計師！

 

圖例

咱們先來看一副設計圖

這幅圖複雜的元素很少，佈局也較爲簡單，咱們大體分析一下，須要PS美工爸爸幫忙作的只有一件事情，就是將上半部分的藍色背景圖給摳出來。
除此以外，出如今這幅設計圖的一些特殊形狀和小圖標，均可以經過CSS3來實現。
咱們將這些特殊形狀和小圖標分爲兩類：

1. 能夠用Icon Font實現的

Icon Font是將一些圖標做成字體文件，在CSS中指定font-face和font-family，而後爲每一個圖標指定相應的class。
在網頁中使用Icon Font就像使用普通的文字同樣，好比font-size屬性能夠設定圖標的大小，設定color屬性能夠設定圖標的顏色。
更多內容，請參考阿里巴巴矢量圖標管理網站：http://iconfont.cn/。

2. 不能用IconFont實現的

爲何這些圖形不用IconFont實現呢？由於一般Icon Font提供的都是一些正方形的矢量圖標，也就是長等於寬的圖標。
本篇要講的就是如何經過CSS3來實現這4個圖形。

三角形

不知你們注意到了沒有，這4個圖形都包含了一個特殊的元素——三角形。
這4個圖形，都是由三角形、長方形，或者是一個被啃掉了一口的長方形組成的。

CSS3是如何實現三角形的呢？——答案是經過邊框，也就是border屬性。

長方形邊框

HTML的塊級元素都是長方形的，好比咱們設定了如下樣式：

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如你們所認知的，這只是一個簡單的長方形，這個長方形在畫面中是這樣顯式的：

 

 這個長方形太單調了，再給它點顏色看看，我們來個彩色邊框吧。

 

<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>

 在畫面中，每一個邊框都變成一個梯形了。

爲何它會變成梯形呢？

請注意長方形的4個角，以左上角爲例，它究竟是屬於左邊框仍是上邊框呢？
左上角，既屬於左邊框，又屬於上邊框，角落的歸屬成了一個問題，瀏覽器爲了避免讓邊框打架，就讓二位各分一半吧。
因而乎左上角就被一分爲二，變成了兩個三角形，三角形靠近哪一個邊框，就顯示那個邊框的顏色。

三角形的實現

再看看文章開頭的4個圖案，你是否是又發現了這樣一個規律？每一個三角形都是「小家碧玉」的，它們沒有內容。
既然如此，咱們把上面這個彩色邊框的矩形內容拿掉，看看會發生什麼。

<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！左邊和右邊都是三角形了 耶！

爲何上邊和下邊仍是梯形呢？這是由於塊級元素默認會在頁面上水平平鋪。

理解這一點，讓上邊和下邊也變成三角形就簡單了，將元素的width屬性設爲0：

 

<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>

 

 

 

 

 

 

JavaScript

 

 

 

 

 

 

 

 

 

 

如今上下左右4個邊框都是三角形了。

假設咱們不要4個三角形，也不要讓它們湊一塊，咱們就只要1個三角形，該如何作呢？
將其餘3個邊框的顏色設爲透明色：

<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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 圖案實現

知道了三角形的實現方法，那麼下面4個圖案實現起來就小Case了。

這4個圖案分別是：旗幟，向右的雙實心箭頭，氣泡和絲帶。

View Demo

爲了便於這幾種圖案的演示，咱們先設定如下基礎共通的樣式

* {
    font-family: simhei, sans-serif;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    background-color: lightblue;
}

div {
    margin: 20px auto;
}

 

 

 

 

 

 

CSS

 

 

 

 

 

 

 

 

實現旗幟

旗幟圖案是下半部分被啃掉了一口的長方形，這一口是個三角形。

根據以上知識，咱們很天然地就能想到實現方法，將border-bottom的顏色設置爲透明的。

 

.flag {
    width: 0;
    height: 0;
    border: 2rem solid #FF6600;
    border-top-width: 4rem;
    border-bottom-color: transparent;
    border-bottom-width: 2rem;
}

 

 

 

 

 

 

CSS 實現雙實心箭頭

 

 

 

 

 

 

雙實心箭頭則是由兩個三角形組成的

爲了減小頁面的HTML元素，咱們能夠只提供一個元素實現第1個三角形，而後藉助CSS3的僞類實現第2個三角形。
第1個三角形使用了相對定位，第2個三角形使用了絕對定位，使得第2個三角形可以緊挨着第1個三角形。

.rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}

.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #fff;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}

.rds-arrow {
    margin-left: 1rem;
}

.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

須要注意的是，箭頭方向是向右的，但在CSS裏面是經過border-left的顏色來控制的。

實現氣泡

氣泡是咱們常見的一種圖案，它是由一個三角形和一個長方形組成的。

因爲三角形是放在長方形前面的，因此咱們使用:before僞類，並設置絕對定位。

.bubble {
    position: relative;
    background-color: #33AAEE;
    width: 10rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
    color: #FFF;
    text-align: center;
}

.bubble:before {
    position: absolute;
    content: "";
    right: 100%;
    top: 1rem;
    width: 0;
    height: 0;
    border-top: 0.6rem solid transparent;
    border-right: 0.6rem solid #33AAEE;
    border-bottom: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
}

.bubble .text {
    display: inline-block;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

實現絲帶

絲帶的實現則稍微複雜一些，不過咱們能夠將它拆分紅3個部分：

1. 一個顯示文字的長方形
2. 左右兩側的耳朵（被啃了一口的長方形）
3. 在下方用於顯示陰影的兩個小三角形

第1步：實現絲帶主體長方形

.ribbon {
    position: relative;
    width: 10rem;
    height: 3rem;
    padding: 0.7rem 0;
    font-size: 1.6rem !important;
    color: #fff;
    text-align: center;
    background: #ff0066;
}

第2步：實現絲帶左右兩側的耳朵

:before僞類實現左耳朵，:after僞類實現右耳朵

.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.6rem;
    border: 1.5rem solid #ff0066;
    z-index: -1;
}

.ribbon:before {
    left: -2.4rem;
    border-right-width: 1.5rem;
    border-left-color: transparent;
    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}

.ribbon:after {
    right: -2.4rem;
    border-left-width: 1.5rem;
    border-right-color: transparent;
    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第3步：實現陰影

.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #bf004c transparent transparent transparent;
    bottom: -0.6rem;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 0.6rem 0 0 0.6rem;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.6rem 0.6rem 0 0;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML代碼：

<div class="ribbon">
    <span class="ribbon-content">金卡會員</span>
</div>

最終效果：

頁面實現

有以上的知識基礎，實現本文開頭的設計圖就較爲簡單了。
因爲代碼較長，我就不貼出來了，請各位直接到GitHub上查看這個demo吧。

View Demo

總結

讀完以上內容，是否是以爲實現這些圖案變得很簡單了？是否是感受很酷？如今你能夠叫本身爲爸爸了。 三角形的運用場景很是之多，你盡能夠發揮你的想象去實現它們！