網頁程式設計
基礎入門教學

用CSS製作特殊圖形[一](矩形、圓形、三角形、橢圓形、平行四邊形等等)

小學生今天在尋找CSS特殊使用法時,找到了純CSS製作而成的各種圖案,看到後,感到相當震驚,沒想到使用CSS可到如此地步。

圖形包括基本的方形、圓形、橢圓、三角形、多邊形、心形、鑽石、八卦等等,測試了主要的三大瀏覽器(IE-版本9以上、Chrome、Firefox)皆可正常顯示效果,後面又去找了其他圖案的CSS語法,一道將資料記錄於此,有用到的朋友們,可參考看看喔!

請在HTML中的<head><style>.....</style></head>之間加入CSS代碼
接著在<body>....</body>之間加入顯示語法

如矩形簡易完整的使用範例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<title>無標題文件</title>
<style>
#square {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>

<div id="square"></div>

</body>
</html>

方型(矩形):

<div id="square"></div>

長方型:

<div id="rectangle"></div>

圓型:

<div id="circle"></div>

橢圓形:

<div id="oval"></div>

半圓形:

<div id="semicircular"></div>

扇形:

<div id="sector"></div>

弧形:

<div id="arc"></div>

上三角:

<div id="triangle-up"></div>

下三角:

<div id="triangle-down"></div>

左三角:

<div id="triangle-left"></div>

右三角:

<div id="triangle-right"></div>

左上三角:

<div id="triangle-topleft"></div>

右上三角:

<div id="triangle-topright"></div>

右下三角:

<div id="triangle-bottomright"></div>

平行四邊形:

<div id="parallelogram"></div>

讚(0)

評論 搶沙發

  • 暱稱 (必填)
  • Email (必填)
  • 網址