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