css如何製作菱形?

菱形是由正方形旋轉45度後形成的圖片，所有我們首先需要新建一個正方形，然後把正方形旋轉45度既可以得到菱形了。

css如何製作菱形

方法/步驟

新建html頁面

開啟html編輯器，新建一個html檔案。如圖：

css如何製作菱形

新增

標籤

在html頁面上找到標籤，在標籤裡新建一個

標籤。如圖：

css如何製作菱形

新增樣式標籤。

在html頁面上找到標籤，在這個標籤的後面新增 <style type="text/css"></style>標籤。如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/d/ae/dae4848cefa2394c9ef94dfb41e6f6c8_thumb.jpg" alt="css如何製作菱形" title="css如何製作菱形"></a><br></p> <p>設定菱形的樣式類</p> <p>建立一個class類為diamond，在這個類中設定菱形的寬高都為100px，背景為紅色；然後使用transform設定旋轉45度；最後設定樣式居中。</p> <p>樣式程式碼：</p> <p>.diamond{ width: 100px; height: 100px; background-color: red; transform:rotate(45deg); -ms-transform:rotate(45deg); /* Internet Explorer */ -moz-transform:rotate(45deg); /* Firefox */ -webkit-transform:rotate(45deg); /* Safari 和 Chrome */ -o-transform:rotate(45deg); /* Opera */ margin:50px auto;/*讓菱形瀏覽器上居中*/ }</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/b/74/b74fa0723f88f8fc4e2680d7244c71ca_thumb.jpg" alt="css如何製作菱形" title="css如何製作菱形"></a><br></p> <p>引用class類</p> <p>在頁面上找到<div>標籤，在<div>標籤上新增 class="diamond" ，就可以引用diamond樣式類了。如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/7/f4/7f4b4dae7895b909fd10ec6fd95b1c32_thumb.jpg" alt="css如何製作菱形" title="css如何製作菱形"></a><br></p> <p>檢視菱形。</p> <p>儲存html檔案後，使用瀏覽器開啟html檔案即可看到菱形圖形。如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/d/80/d803c2e97e8a9e7261a4e2e8df415a78_thumb.jpg" alt="css如何製作菱形" title="css如何製作菱形"></a><br></p> <p>菱形圖形的所有程式碼：</p> <p><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>菱形

相關問題答案

Have any Question?

Let us answer it!