用css來寫一些簡單的圖形

標籤：absolute   ati   ros   bottom   back   relative   parent   osi   content   

在寫網頁的過程中，有時我們需要用到一些簡單的圖片但是手頭又沒有合適的，我們其實可以自己來寫，下面我就簡單的介紹幾個例子：

1.上三角

Triangle Up

#triangle-up {

width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

2.下三角

Triangle Down

#triangle-down {

width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

3.左三角

Triangle left

#triangle-left {

width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

4.右三角

Triangle right

#triangle-right {

width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

5.左上直角

Triangle Top Left

#triangle-topleft {

width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

6.右上直角

Triangle Top Right

#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

7.左下直角

Triangle Bottom Left

#triangle-bottomleft {

width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }

8.右下直角

Triangle Bottom Right

#triangle-bottomright {

width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }

 

 

最後來一個稍微複雜一點點的

十字架

Cross

#cross {

background: red; height: 100px; position: relative; width: 20px; } #cross:after { background: red; content: ""; height: 20px; left: -40px; position: absolute; top: 40px; width: 100px; }

用css來寫一些簡單的圖形