当前位置:首页 > 网页设计 >CSS >

28个纯CSS画图代码分享

发布时间:2016-01-27 09:46:31 作者:佚名 阅读:(733)

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,css居 然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3 的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯 CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧。

1、正方形

CSS代码如下:

 

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

2、长方形

CSS代码如下:

 

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

 

3、CSS圆形

CSS代码如下:

 

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

 

4、CSS椭圆

CSS代码如下:

 

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

 

5、CSS上三角

CSS代码如下:

 

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50pxsolidtransparent;
    border-right: 50pxsolidtransparent;
    border-bottom: 100pxsolidred;
}

 

6、CSS下三角

CSS代码如下:

 

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50pxsolidtransparent;
    border-right: 50pxsolidtransparent;
    border-top: 100pxsolidred;
}   

 

7、CSS左三角

CSS代码如下:

 

#triangle-left{
    width: 0;
    height: 0;
    border-top: 50pxsolidtransparent;
    border-right: 100pxsolidred;
    border-bottom: 50pxsolidtransparent;
}

 

8、CSS右三角

CSS代码如下:

 

#triangle-right{
    width: 0;
    height: 0;
    border-top: 50pxsolidtransparent;
    border-left: 100pxsolidred;
    border-bottom: 50pxsolidtransparent;
}   

 

9、CSS左上三角

CSS代码如下:

 

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100pxsolidred; 
    border-right: 100pxsolidtransparent;          
}

 

10、CSS右上三角

CSS代码如下:

 

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100pxsolidred; 
    border-left: 100pxsolidtransparent;
     
}

 

11、CSS左下三角

CSS代码如下:

 

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100pxsolidred; 
    border-right: 100pxsolidtransparent;  
}   

欢迎分享转载→ 28个纯CSS画图代码分享

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们