HTML5 CSS3繪製鋸齒狀的矩形_html5教學技巧

最近透過敲Html5 Css3，分享一些自己認為值得學習的知識，分享給大家。

如何繪製一個鋸齒狀的長方形：如圖

我們知道繪製圖形可以用canvas ，canvas是HTML5出現的新標籤，用於在網頁上繪製圖形，H5的canvas使用Javascript在網頁上繪製圖形。
如上鋸齒狀的長方形，就是用canvas繪製的。

實作程式碼：

XML/HTML Code複製內容到剪貼簿

1. html>     
2. html lang="en" >     
3.     頭>    >
4.                  元 元 
字元
5.  字元8">              標題>
鋸齒圖
6. 標題>              腳本 
7. >     
8.         window.addEventListener("load", eventWindowLoaded, false);     
9.         函數 eventWindowLoaded(){     
10.             var x,y;                  var theCanvas = 
>
11.             var context =              
12. context.行程樣式 =              context.lineWidth
=            context.StrongRect(10,  10, theCanvas.width-20, theCanvas.height-20);               context.fillStyle =  🎜>             對(
13. x=
14. 5=5= =canvas.width;x
15. x=x 10){                      context.beginPath();                      context.arc(x,5,5,0,Math.PI*2,true);                      context.arc(x,canvas.height-5,5,0,Math.PI*2,true);                      context.closePath();     
16.                 context.fill();     
17.             }     
18.             為(y=5=5= =canvas.height;yy
=y 10){     
                context.beginPath();     
                context.arc(5,y,5,0,Math.PI*2,true);     
                context.arc(canvas.width-5,y,5,0,Math.PI*2,true);     
                context.closePath();     
                context.fill();     
            }     
        }     
26.         腳本>
 🎜>
27. >      頭>
28.     >        
29. 身體>               div
 
30. 樣式="位置：絕對；上圖：100 個像素；前部：100 個像素；「>          工資 id="勞動力"  寬度="400" 高 "170" 頂部=50px; 
左
31. =50px;> 🎜>>
32.  🎜>>       div
>
33.     >        

身體>           html>          

如何寫如下這樣一個形狀，一個長方形分成兩部分，用斜線隔開，兩種顏色。如圖：

起初是這麼一個思路，用一個div,中間畫個斜線，分成兩部分，兩種顏色，但是沒有實現，由於前台薄弱，能力有限，想到了另外一種方案。

用三個div,左右是兩個div,設定寬和高，起重要作用的其實是這一部分：

其實就是一個長方形，分成兩個三角形，最後實現瞭如上效果。換個思路，實現起來so easy，不能在一棵樹上吊死。

程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. HTML>     
2. html lang="en">     
3.      
4. body style=style=style
0 0 0;"
5. >          div id="1" style="background-color:#727171;width:50px;height:20px;; > >div
>
6.                     div id="2" style="float:left;border-width:10px;border-color:#727171 #90a0 -style:solid">
7. div>   >      div id="3" style="background-color:#9fa0a0;width:50px;height:20px;float:left" > >
8. div>               
9. body>     
     

html>           後續繼續總結有關HTML和CSS的一些知識，前台的知識看起來簡單，其實是個細緻活，可以鍛鍊一個人的耐心。從簡單到複雜，從入門到深入，一點點提升自己。