纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。

现在的位置: 首页 > 综合 > 正文

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。

2013年08月11日 ⁄ 综合 ⁄ 共 892字 ⁄ 字号小中大 ⁄ 评论关闭

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow，transform等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE<9的浏览器，最好用firefox，chrome等浏览器。以下案例都由本人亲自测试，希望好学您也可以一一测试一下。

1.正方形

正方形

#square {
   width: 100px;
   height: 100px;
   background: red;
}

2.长方形

长方形

#rectangle {
   width: 200px;
   height: 100px;
   background: red;
}

3.圆形

圆形

#circle {
   width: 100px;
   height: 100px;
   background: red;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
}

4.椭圆

椭圆

#oval {
   width: 200px;
   height: 100px;
   background: red;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;
}

5.上三角

上三角

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

6.下三角

下三角

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