CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

浏览数：31 / 时间：2015年06月09日

有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，用的是firefox或者chrome，当然IE也能看一部分

1、正方形

div{
    background:#F00;
    width:100px;
    height:100px;
}

2、长方形

div{
    background:#F00;
    width:200px;
    height:100px;
}

3、圆形

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

4、椭圆

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

5、上三角

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

6、正方形

7、正方形

8、正方形

9、正方形

10、正方形

11、正方形

12、正方形

13、正方形

14、正方形

15、正方形

16、正方形

17、正方形

18、正方形

19、正方形

20、正方形

21、正方形

22、正方形

23、正方形

24、正方形

25、正方形

26、8角星

div {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

27、钻石

div{
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
div:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

28、阴阳八卦

div {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
div:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}