CSS 不規則圖形繪制

 

基礎技能1 - 神奇的border

我們先來畫一個長方形：

.Rectangle
{
    height: 100px;
    width: 200px;
    background: darkgray;
    border-width: 50px;
    border-style: solid;
    border-top-color: cyan;
    border-bottom-color: blue;
    border-left-color: orange;
    border-right-color: green;
}

有沒有發現什么？ 對，四個邊的交界處是45°角。那我們可以用這個東東干點什么呢？往下看。

進階技能1 - 三角形

如果我們把左邊的border變寬，右邊的border設為0，上下的border設為透明，自身長寬都設為0，猜猜會發生什么？

.Triangle
{
    height: 0;
    width: 0;
    border-left: 50px solid orange;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

不錯，我們得到了一個三角形。那么根據以上思路，我們可以調整各邊border長度，獲取各種不同形狀和大小的三角形。

當然，梯形也是一樣的道理。

 

基礎技能2 - 神奇的radius

來，我們先畫一個圓形。 什么？不知道怎么畫？Look

.Cycle
{
    width: 120px;
    height: 120px;
    background: orange;
    border-radius: 60px;
}

border-radius允許我們設置上下二條邊的左右側弧度，那么采用border-radius可以畫出各種圓角圖形，如橢圓，雞蛋等。

border-radius:2em;

border-radius是以下四種寫法的簡寫

    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

  

基礎技能3 - 神奇的rotate

Rotate允許我們把元素向某個方向進行旋轉

.NoRotate {
    width: 100px;
    height: 100px;
    background: orange;
    /* transform: rotate(-45deg); */
}
.Rotate
{
    width: 100px;
    height: 100px;
    background: orange;
    transform: rotate(-45deg);
}

 

基礎技能4 - 偽元素

:before 和 :after 偽元素是存在於真實元素前和后的虛擬元素，通常我們可以借用這二個偽元素實現某些css效果。

比如，恩，紅星閃閃放光彩，來個紅星？

好想法，以上圖形可以拆解為3個三角形的疊加，使用偽元素+Rotate我們可以巧妙的把圖形疊加起來

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(35deg);    
}
  
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    transform: rotate(-35deg); 
}
  
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);     
}   

 

進階技能2 - 各種不規則幾何圖形

根據以上基礎技能，我們現在掌握了 三角形+圓形+旋轉+偽元素 的技能組合，那么基本上我們可以把常見的非規則圖形拆解為以上圖形進行組合。比如：

六角形，五邊形，心形等。

 

終極大招 - Canvas & SVG

好了，自信滿滿了，組合技能在手，who怕who。

BOSS： 那誰誰誰，你給我畫個中國地圖出來。

納尼？Are you kidding me？

Canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

示例代碼如下：

var canvas = document.getElementById('test-shape-canvas'),
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變為透明
ctx.fillStyle = '#dddddd'; // 設置顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形塗色
// 利用Path繪制復雜路徑:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

 

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

 示例代碼如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

  <polygon points="100,10 40,180 190,60 10,60 160,180"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

 

 

總結

總的來說，隨着CSS3和HTML5新特性的逐漸發力，前端圖形展示很多時候脫離了原始的圖片模式，采用CSS繪圖可以減少圖片的使用，縮小頁面大小，加快加載速度，特別是對於移動端具有較高的性價比。

 

 

 

 

refers:

http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

https://www.cnblogs.com/liangxiaofeng/p/5936760.html

https://www.liaoxuefeng.com/wiki