您现在的位置是：网站首页> 编程资料编程资料

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）_CSS教程_CSS_网页制作_

2021-09-07 885人已围观

简介今天在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

上一篇：CSS3属性box-shadow使用详细教程_css3_CSS_网页制作_

下一篇：CSS3制作日历实现代码_css3_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢