您现在的位置是：网站首页> 编程资料编程资料
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）_CSS教程_CSS_网页制作_
2023-10-29
159人已围观
简介 今天在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、圆形
最终效果：
相关内容
- CSS3属性box-shadow使用详细教程_css3_CSS_网页制作_
- 兼容IE与firefox的css 线性渐变（linear-gradient）_CSS教程_CSS_网页制作_
- CSS模拟小箭头的实现代码_CSS教程_CSS_网页制作_
- CSS图片垂直居中方法整理集合 ！(常见问题解答)_CSS教程_CSS_网页制作_
- CSS图片垂直居中实现方法详解 _CSS教程_CSS_网页制作_
- 推荐14款非常有用的 CSS 网格系统生成工具 _CSS布局实例_CSS_网页制作_
- 那些不常用却很有的CSS小结_CSS教程_CSS_网页制作_
- 分享CSS3中必须要知道的10个顶级命令_css3_CSS_网页制作_
- 全民飞机大战小仙子每级所需升级费用_手机游戏_游戏攻略_
- 雷霆战机修改闪退的方法教程_手机游戏_游戏攻略_
