用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来写一些简单的图形

标签：absolute   ati   ros   bottom   back   relative   parent   osi   content   

原文地址：http://www.cnblogs.com/liulijun330/p/6057882.html