概述
在早期的前端Web設計開發年代,完成一些頁面元素時,我們必須要有專業的PS美工爸爸,由PS美工爸爸來切圖,做一些圓角、陰影、鋸齒或者一些小圖標。
在CSS3出現後,藉助一些具有魔力的CSS3屬性,使得這些元素大多都可以由開發人員自己來完成。在開始閱讀這篇文章前,我們先喊個口號:不想當藝術家的程序員不是好設計師!
本文的Demo和源代碼已放到GitHub,如果您覺得本篇內容不錯,請在GitHub上加個星星!
圖例
我們先來看一副設計圖
這幅圖複雜的元素不多,佈局也較爲簡單,我們大致分析一下,需要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>
現在上下左右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(https://keepfool.github.io/css3-tutorials/shapes/triangles.html)
爲了便於這幾種圖案的演示,我們先設定以下基礎共通的樣式
* {
font-family: simhei, sans-serif;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: lightblue;
}
div {
margin: 20px auto;
}
實現旗幟
旗幟圖案是下半部分被啃掉了一口的長方形,這一口是個三角形。
根據以上知識,我們很自然地就能想到實現方法,將border-bottom的顏色設置爲透明的。
.flag {
width: 0;
height: 0;
border: 2rem solid #FF6600;
border-top-width: 4rem;
border-bottom-color: transparent;
border-bottom-width: 2rem;
}
實現雙實心箭頭
雙實心箭頭則是由兩個三角形組成的
爲了減少頁面的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步:實現絲帶主體長方形
.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(https://keepfool.github.io/css3-tutorials/shapes/demo/user-center.html)
總結
讀完以上內容,是不是覺得實現這些圖案變得很簡單了?是不是感覺很酷?現在你可以叫自己爲爸爸了。
三角形的運用場景非常之多,你儘可以發揮你的想象去實現它們!