您现在的位置:主页 > 娱乐八卦 > 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等

2018-09-23 21:04

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的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代码如下:


复制代码

代码如下:


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

4、椭圆

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

5、上三角

最终效果:

CSS代码如下:


复制代码

代码如下:


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

6、下三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

7、左三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

8、右三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

9、左上三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

10、右上三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

11、左下三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

12、右下三角

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

13、平行四边形

最终效果: 

CSS代码如下:


复制代码

代码如下:


#parallelogram {
width: 150px;
height: 100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}

14、梯形

最终效果: 

CSS代码如下:


复制代码

代码如下:


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

15、六角星

最终效果: 

CSS代码如下:


复制代码

代码如下:


#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

16、五角星

最终效果: 

CSS代码如下:


复制代码

代码如下: