立即致電查詢!
電話: 3590-9591

網頁設計小技巧: 利用CSS3來畫簡單圖案

隨著瀏覽器的技術進步,CSS3得到很快的普及,網頁設計師又有很多新點子可以嘗試了。

今次介紹一下利用CSS3來繪製圖案,完全不需要使用圖檔,當然你要找一個支援CSS3的瀏覽器,例如Google ChromeFirefox 6

 

<div style="
background: #30555A;
height: 45px;
width: 90px;
-moz-border-radius:90px 90px 0 0;
-webkit-border-radius:90px 90px 0 0;
border-radius:90px 90px 0 0;"></div>

 

<div style="
width: 0;
height: 0;
border-top: 100px solid #30555A;
border-left: 50px solid transparent;
border-right: 50px solid transparent
"></div>

 
<div style="
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #B12025;
border-left: 60px solid #B12025;
border-bottom: 60px solid #B12025;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
"></div>

原文網址:
https://www.aveego.com/html/o_36383_0_/網頁設計小技巧-利用css3來畫簡單圖案.html
原文作者︰

更多網頁設計新聞

我們的客戶

我們的客戶